前端移动端开发, 滑动时怎么禁止阴影层下的屏幕滚动.

Question

前端移动端开发, 在页面中打开了一个层,同时打开一个遮罩层, 滚动这个层时 下面的页面也会跟着滚动.
怎么禁止下面那个页面的滚动, 只滚动当前的层.

Answer 1

我的做法是阻止touchstart事件的默认行为,不知道有没有更好的方法.
在vue下
@touchstart.prevent
可以这样,
在弹出层和底层元素之间曾加一层遮罩

<div>底层</div>
<div class="mask">遮罩层</div>
<div>弹出层</div>

然后

.mask{position:fixed;left:0;top:0;right:0;bottom:0}

然后

$('.mask').on('touchmove',function(e){e.preventDefault()})

Answer 2

打开弹层时body的touchmove事件addEventListener增加阻止默认行为的事件，关闭弹层时removeEventListener

Answer 3

这个还得确定一下那个弹出层是你自己写的还是插件，如果是你自己写的，就把对应的touchmove/mousemove事件通过添加事件监听器addEventListener阻止一下默认事件。如果是插件，就两个都加上。

Answer 4

禁止滚动的层设置overflow:hidden看看？

Answer 5

现在的解决办法是
修改body的position为fixed, 弹窗消失的时候再恢复就行了。

Answer 6

js，或者给body设置一屏高度，再设置overflow:hidden