前言
这个问题其实是老问题了,在没有硬件加速的浏览器APP中都能见到这个问题,比如安卓机自带的浏览器等等,不过,所有机型的微信浏览器都没有这个问题。这个bug具体说,就是fixed元素在最前端,并且overflow:hidden,当滚动这个元素的时候,我们期望的是它纹丝不动,然而,这个元素会抖动。
如果你希望能在任何移动浏览器正常显示,那么本文对你有用。
网上的解决办法
搜索“fixed + 抖动”会出现很多方案,我不在这列举。然而,在我的手机上测试都无法正常修复bug,不过其中最接近的方案是,给元素绑定一个touchmove事件,然后阻止这个事件的默认操作。虽然满足了我的要求,但是,布局问题让js参与终究不是好办法,通过摸索,我还是实验出了一个可行办法。
修复方案
一、给body元素准备一个类:
body.position-fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
其实,不给body设类,而是给跟body元素同样覆盖面积的一个祖先元素设fixed,也可以实现同样效果。如果这个祖先元素的文档流位置并不是跟body重合,那就不行了。所以请找跟body元素位置重叠的祖先元素。
二、给元素也指定fixed类,具体就不写了,因为不用额外加任何代码。这样就行了。
这种方法的背后原理,我其实不太清楚,但问题总算解决了。