解决遮罩层上方元素可以滚动禁止遮罩层下方滚动问题
Posted gjbbd
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了解决遮罩层上方元素可以滚动禁止遮罩层下方滚动问题相关的知识，希望对你有一定的参考价值。
1. 通过js控制
打开遮罩层时：----有兼容性问题,苹果和安卓低版本滑动时屏幕上下部分会闪动
document.documentElement.style.overflowY = ‘hidden‘; //禁止底层div滚动
关闭遮罩层时：
document.documentElement.style.overflowY = ‘auto‘; //取消禁止屏幕滚动
2. 在vue中
如果不要求遮罩层滚动，那么就直接给遮罩层最外层元素添加：
@touchmove.prevent
3. 通过css控制
存在问题：当打开遮罩层时页面会回滚到最顶部
在打开遮罩层时：
document.body.style.overflow = ‘hidden‘
document.body.style.width = ‘100%‘
document.body.style.height = ‘100%‘
document.body.style.position = ‘fixed‘
在关闭遮罩层时：
document.body.style.overflow = ‘scroll‘
document.body.style.width = ‘100%‘
document.body.style.height = ‘100%‘
document.body.style.position = ‘relative‘
4. 最佳解决方式
在打开遮罩层时：
document.body.style.overflow = ‘hidden‘
在关闭遮罩层时：
document.body.style.overflow = ‘scroll‘
解决遮罩层上方元素可以滚动禁止遮罩层下方滚动问题
以上是关于解决遮罩层上方元素可以滚动禁止遮罩层下方滚动问题的主要内容，如果未能解决你的问题，请参考以下文章
js 弹出框 里面元素touchmove时候阻止其他元素滚动，背景遮罩层还无法阻止冒泡，怎么禁用遮罩层touchmove