fixed在移动端的坑

最新推荐文章于 2022-06-10 23:50:55 发布
最新推荐文章于 2022-06-10 23:50:55 发布
阅读量2.9k 收藏 1
点赞数 1
本文探讨了fixed定位可能导致的1px边框线消失、input焦点丢失及在可滚动容器中定位失效等问题，并提供了translateZ属性、切换定位方式等实用解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  1. fixed在某些情况下可能导致容器内的子元素的1px边框线消失，即使使用z-index也无法解决。
    解决方法：可以使用translateZ属性来解决

  2. fixed定位的容器内不能带有input，这是常见的bug。
    解决方法： 在input聚焦的时候去掉fixed定位状态，改为absolute。

  3. fixed＋可滚动的容器内会导致fixed定位的子元素在滚动时定位失效，滚动完成后才正常回到fixed的位置。
    解决方法：尽量不要在可滚动的容器内包含fixed定位的子元素。

  4. ios不支持onresize事件

Running_FE
关注
select 移动端 第一个无法选中_总结在移动端碰到的坑
weixin_39611413的博客
12-21 819
一、安卓设备的select options的坑，尽量使用各浏览器内核都支持的api在添加 OPTION 元素时如果需要向指定索引前插入 OPTION，可以使用 options.add(option, index)；如果需要向 SELECT 尾部添加 OPTION，可以使用 options.add(option)；如果需要向指定索引处添加(或更改) OPTION，可以使用 options[index...
移动端onTouchMove事件 以及Fixed定位的坑
weixin_33696822的博客
06-19 3825
就为了一个小特效搞了一天时间！话不多说需求是这样的：在页面上做一个浮动的小图标，可以拖拽移动它。效果是这样的：代码是这样的：大家都知道，移动端拖拽事件主要就是利用touchmove。为了防止拖拽它的时候，禁止浏览器的上下滚动，我的方法是在onTouchStart中将html和body的样式设为 height: 100%; overflow: hidden，然后在onTouchEnd中将样式清空。最...
Web移动端Fixed布局的解决方案
10-22
其实在 fixed 和输入框的问题上，基本思路就是： 由于 fixed 在软键盘唤起后会失效，导致在页面可以滚动时，会跟随页面一起滚动。因此如果页面无法滚动，那么 fixed 元素即使失效，也不会滚动，也就不会出现 bug 了。
移动端fixed布局问题
wangrongrong1990的博客
04-19 398
body上不能加overflow属性
flex/fixed上中下（移动端）
昔冰_G的博客
06-10 572
使用flex或fixed实现移动端顶部、内容、底部布局；别忘了html和body的高度！
android fixed,Web移动端Fixed布局的解决方案
weixin_28937075的博客
05-27 454
Web移动端Fixed布局的解决方案 __veblen移动端业务开发，iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况。 但是 fixed 元素在有软键盘唤起的情况下，会出现许多莫名其妙的问题。 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案。iOS下的 Fixed + Input BUG现象让我们先举个栗子，最直观的说明一下这个 BUG 的现象。 ...
vue移动端开发使用vant和animate.css遇到的坑
weixin_44294658的博客
06-11 1668
移动端开发使用vant作为ui主要框架已经使用animate.css作为动画库开发遇到的一些问题 太坑了。。。。。。。 在使用animate.css动画的时候，要使用动画的元素最好是与vant的绝对定位的元素同级，最好不要把vant中绝对定位的组件放到使用动画的元素。举个例子： 如图示例，组件van-number-keyboard包含在做动画的元素中，结果导致position的值虽然为fixed,并且bottom为0，但是组件还是跑到了页面上方，位置出现异常。 修正之后如下图显示： 调整之后的显
移动端知识点
m0_58225312的博客
11-03 351
最近又做到了移动端，怕自己忘记移动端的知识点，所以选用博客记载下，方便自己或他人查看 1.meta标签 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/> 自适应 <meta content="yes" name="apple-mobile-web-app-capable"> IOS中safari允许全屏浏览 <met...
移动端左侧抽屉点击二级列表——
My_ccup的博客
05-28 1904
整个逻辑很简单，没什么—— //注意一个区别就好： $(select).index(this); $(this).index(); 它们两者的区别—— ———— 第一个是至返回的选择器的数组中所选择的第几项—— 第二个是当前选择的元素，在同胞元素中所排列的位置—— （自行百度） 下面： html 这里面主要是左侧列表的内容信息； js引用，jq引用，css引用省略—— <body&...
解决Web移动端Fixed布局的方案（防止页面露底、overflow-scrolling、iOS下的 Fixed + Input BUG现象、isScroll.js）
热门推荐
我的博客
11-08 1万+
一些细节处理 在细节处理上，其实还有很多要注意的，挑几个实际遇到比较大的问题来说一下： 有时候输入框 focus 以后，会出现软键盘遮挡输入框的情况，这时候可以尝试 input 元素的 scrollIntoView 进行修复。在 iOS 下使用第三方输入法时，输入法在唤起经常会盖住输入框，只有在输入了一条文字后，输入框才会浮出。目前也不知道有什么好的办法能让唤起输入框时正确显示。这暂时
移动端 position:fixed失效问题
spfLinux的博客
02-26 2997
当页面比较长时，滚动页面，发现设置的固定定位失效发现可以这样子解决将不是固定定位的其他元素放在一个div中，给这个div设置这样的样式：.con{ overflow-x:auto; overflow-y: scroll; }一切ok参考链接：点击打开链接...
解决移动端两端布局的input+fixed的bug
weixin_34416754的博客
03-28 222
在移动端布局中，会经常出现固定在手机上下两端的页面。 但是fixed定位和软键盘碰上之后，会碰到各种的坑，ios和android上都会遇到。 下面就分享一下如何解决此问题，代码实例如下: 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <!DO...
移动端尽量不用fixed定位
weixin_34354945的博客
09-28 497
ios iframe内的fixed定位会失效 ios系统中去掉元素被触摸时产生的半透明灰色遮罩a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)} ios中去掉默认input默认样式input,button,textarea{-webkit-appearance: none;} ...
transform属性影响fixed定位
weixin_45229447的博客
09-30 1852
偶然的机会发现fiexd定位会受到transform的影响，以下为自己弄的小案例 当外部元素没有transform属性时 -----css部分----- <style> *{ padding: 0; margin: 0; } .transform{ width: 100px; height: 100px; background: rgb(196, 196, 196); /* transform:tra
Web移动端Fixed布局的解决方案(原文出处：http://efe.baidu.com/blog/mobile-fixed-layout)
linzhijing_csdn的博客
04-18 3159
移动端业务开发，iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况。 但是 fixed 元素在有软键盘唤起的情况下，会出现许多莫名其妙的问题。 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案。 iOS下的 Fixed + Input BUG现象 让我们先举个栗子，最直观的说明一下这个 BUG 的现象。 常规的 fixed 布局，可能使用
解决移动端不支持position: fix
IT探险者-returningprodigal
09-06 1994
最近我在做自己公司的官网，pc端做出来了，网页浏览顺畅，但到了手机端测试，问题出现了：网页上的悬浮菜单滑动的时候，不会跟着滚动条走，并且网页出现了横向滚动条。在这个问题上我折腾了整整一下午的时间，但还是没有解决问题。最终是在第二天早上花了半小时搞定的。从这个问题上我得到了一种解决问题的思路 1. 当解决一个问题花了较长的时间时，不妨休息下，放在第二天早上去解决，你会收获不一样的感觉。 2.
Fixed元素在滚动时会抖动----开启硬件加速
weixin_33912246的博客
02-27 391
原文：http://stackoverflow.com/questions/11258877/fixed-element-disappears-in-chrome/18764086# Add-webkit-transform: translateZ(0)to theposition: fixedelement. This forces Chrome to use hardware acc...
移动端position:fixed滑动问题
MaRain
08-06 5955
前提在任务中需要我在页面上使用position：fixed 和 overflow：scroll 这两个属性，结果在手机端出现头部也跟着滑动的现象。那么怎么来处理这个现象呢？解决办法分别把position：fixed 和 overflow：scroll 两个属性分开到两个box中。<div style=" overflow : scroll"> <div style="position:f
移动端解决fixed滚动出现抖动的问题
05-02
在移动端，当使用fixed定位元素时，滚动页面会出现抖动的问题。这是由于移动设备的浏览器在滚动时会对fixed元素重新定位，从而导致抖动。为了解决这个问题，可以采用以下几种方法： 1. 使用CSS属性-webkit-overflow-scrolling:touch，设置overflow元素为scroll或auto，并为其父元素设置该属性。这可以让页面在滚动时平滑滑动，同时固定元素不会抖动。 2. 使用position:sticky，而不是fixed，对于支持sticky的浏览器，它会在页面滚动时保持元素的位置，并且不会产生抖动。 3. 使用JavaScript，通过监听滚动事件，在滚动时实时更新固定元素的位置，从而避免抖动。 综上所述，以上方法都可用于解决移动端fixed元素滚动出现抖动的问题，具体应该根据实际情况选择最适合的方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值