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


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

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

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

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

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

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

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

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

 

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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM