标签：mil   ali   move   fixed   center   time   har   vue   overflow   

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‘

解决遮罩层上方元素可以滚动禁止遮罩层下方滚动问题

解决遮罩层上方元素可以滚动禁止遮罩层下方滚动问题

标签：mil   ali   move   fixed   center   time   har   vue   overflow   

原文地址：https://www.cnblogs.com/gjbbd/p/12516066.html