弹框内容滚动页面不滚动办法

之前写过一篇文章，是解决弹框显示的时候， body 不允许滑动，思路大致如下：

弹框显示时，设置 html 和 body  overflow:hidden ,并阻止浏览器的默认行为；

弹框隐藏时，设置 html 和 body  overflow:auto ,并方法浏览器默认行为。

但是这种办法当弹框里面的内容也需要滑动的时候，是滑动不了的，因为已经阻止了浏览器的默认滑动行为。

后来针对这种需求的解决办法为：

1.页面滑动时，获取外层盒子的 scrollTop ，弹框显示时设置滚动盒子 position:fixed ， top 为外层盒子当前 scrollTop 

2.取消弹框时恢复滚动盒子 position：relative;top:0; ，外层盒子赋值 scrollTop 为原来的 scrollTop 

这样既阻止了主体内容的滚动，同时又不影响弹框内容的滚动。

 

如有表述不准确之处，欢迎指正，欢迎补充，感谢阅读。