移动端position:fixed滚动页面会产生抖动的有效解决办法

前言

这个问题其实是老问题了，在没有硬件加速的浏览器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类，具体就不写了，因为不用额外加任何代码。这样就行了。

这种方法的背后原理，我其实不太清楚，但问题总算解决了。