移动端滚动穿透问题新解

今天遇到一个问题，就是在一个弹出层里面有一个可滚动的列表，当列表弹出层列表滚动的时候，原来的页面也跟着滚动了，体验相当不好。

在PC还好，可以给body一个overflow:hidden完事，在移动端却不管用啊

查了一下，这个叫移动端滚动穿透，一个大神给出了解决方案：点这里，感觉还是太麻烦了

然后自己琢磨了一番，想到了一个简单的处理方法。

既然滚动是因为内容超出了父级容器，那么就好办了，直接让内容不超出就好了。

直接让内容脱离文档流，使用position:fixed，当弹出层弹出的时候直接在body上加绝对定位position:fixed，当弹出层消失的时候，把原来页面的定位去掉。嗯，就这么简单。

看代码

这里要注意一点就是，在弹出层出现之前记住页面的滚动高度，然后当弹出层出现的时候，把之前滚动的高度赋值给body定位

同样的，当弹出层消失后，利用滚动高度还原用户之前的滚动位置