移动端弹窗如何阻止body滚动

1、弹出层出现时给body添加一个css样式：height:100%;overflow:hidden;弹出层消失再去掉这个类。测试结果：chrome手机模拟器还真可以，but到了我的安卓手机上。

2、之后又看到有人提到，是要html也设置同样的样式才会有效果，所以同样给html添加了这个类，弹出层消失时去掉这个类。

3、测试结果：效果是有了，弹出层内可以滚动，底层不滚动了，but当弹出层出现，底层body会回到页面顶部，这个并不是我想要的。

4、弹出层出现时给body添加样式position:fixed，并算出当时页面的scrollTop滚动值，给body一个负的top值来保证body不会回到顶部，弹出层消失时恢复。

5、无意中发现定位层之间好像是不会传递糙怍牢莱事件的，将弹窗之外的元素包在一个div里，给这个div设置定位样式，给宽高是充满屏幕的，设置overflow:auto;这样这个div和弹出层就是两个定位层，滑动弹出层时不会传递到div上的。

6、给div设置以上两种其中一种样式就可以，第一种的bottom：0和第二种height:100%都是为了固定div的高度是屏幕的高度，overflow:auto使滚动发生在div内部，这样弹出层的滚动就不会传递给div了,如果不给设置高度，弹出层的滚动事件仍然会传递给body，div就会随着body滚动。