移动端positon：fixed；这个属性iphone手机上有问题吗？

Posted 2023-03-16

position：fixed；andrion手机上正常显示。iphone手机上就不正常了。怎么解决。
谢谢大家帮忙解答

参考技术A position：fixed这个属性，但是发现在iphone中并不支持这个属性，菜单会随着滚动条滚动而滚动。后然就想到通过脚本控制来解决（参考jquery mobile），通过touchstart，touchmove和touchend事件来计算clientY变化来相应移动菜单，但是还是发现有两个问题，如果移动的快的话：1.菜单无法及时定位有延迟2.在iphone中touchend事件后还会scroll，看了jquery mobile解决办法它是先隐藏相应菜单，等算好了再显示，总觉得怪怪的，而且这个办法最后还是被项目经理给no了，其实一开始就想到iscroll.js这个框架觉得它蛮不错的。一直有关注它，但是在4.2.5之前版本连内容中A标签都点不了，所以就没想用它，到最后没折了就去蛮试了一下，想不到4.2.5解决很多之前的bug，最后还是用了它来解决。同时也参考了163手机版的做法，采用以下解决办法：
1.在android手机中继续使用position：fixed这个属性；
2.在iphone中使用了iscroll.js框架来解决；追问

嗯嗯，怎么判断是Android还是iphone呢？

本回答被提问者和网友采纳

移动端fixed的元素抖动的问题

工作中发现，给一个元素添加fixed属性，让它固定在窗口某个位置，直接加fposition:fixed属性就能实现这个效果；

在安卓手机上的效果都比较好，但是ios系统的个别浏览器兼容性就不好，如QQ浏览器、UC浏览器、360浏览器（这几个是ios最容易出问题的浏览器）；

问题：当用户快速滑动页面的到时候，fixed的元素就会在窗口跳动或者抖动，非常影响用户体验

下面提供几个解决方案，仅供参考，如有更好更有效的解决办法，欢迎留言交流探讨！

 

方法一：

给body设置高度100%

body,html{
    widht:100%;
    height:100%;
}

这个方法很有效，但是适用于自己单独开发的页面。

如果是项目中已经做好的页面，有其他特效，直接设置这个属性，可能对页面的其他功能造成影响。

如果使用此法，本地调试效果不好，建议不要使用。

 

方法二：

给fixed的元素添加背景定位的属性

background-attachment：fixed；

切忌：这个属性不要给有背景图片的元素添加

这个方法看起来也生效了，由于身边没有测试机的限制，无法测试效果，有条件的朋友可以试一下；

 

下面是网络上查到的其他方法，我试过没起作用，列出来供大家参考

方法三：

给固定定位的元素添加transform属性

transform:translateZ(0);或者transform:translate3d(0,0,0);

我尝试的结果是，这个方法没有起效；

 

方法四：

多加一层盒子，外层fixed固定定位，内层的设置绝对定位absolute；

 

还有一种方法说可以用绝对定位模拟固定定位，本人么有模拟出来，网上提供的方法也没有实现这个效果。