如何显示遮罩层时禁止底层页面滑动

在touchmove时禁用浏览器默认事件， 

document.addEventListener('touchmove', function (event) {
   
        event.preventDefault();
  
})

我只需要在遮罩弹出时禁用，遮罩关闭时释放，于是我改了下代码：

var aBtn=$('#a1');      //点击按钮
var guide=$('.guide');  //弹出的遮罩层
var flag=0; 　　　　　　  //标识，初始为0
aBtn.tap(function() {
    guide.css('display', 'block');  //显示遮罩
    flag=1;

});
document.addEventListener('touchmove', function (event) { 　　 //监听滚动事件
    if(flag==1){　　　　　　　　　　　　　　　　　　　　　　　　　　　　//判断是遮罩显示时执行，禁止滚屏
        event.preventDefault();　　　　　　　　　　　　　　　　　　　//最关键的一句，禁止浏览器默认行为
    }
})
guide.tap(function(){
    guide.css('display','none'); 　　　　//隐藏遮罩
    flag=0;　　　　　　　　　　　　　　　　　//重置为0
});

当遮罩层滚动到最低端或是最顶端的时候还是会滚动底部的内容

最终解决方案：
弹出层父元素设置属性为overflow-y:scroll;
弹窗弹出时，用js控制让底层元素的position属性设置为fixed;
弹窗关闭时候，用js控制底层元素的position属性为正常；
在iOS端，为了弹窗里面的滚动效果看起来顺滑，需要设置弹窗层的包裹元素属性：-webkit-overflow-scrolling : touch; 
  
  
1
2
3
4
其实还是存在一点小问题，就是弹出层消失的时候，底层页面会自动滚动到顶部，我们可以在弹出层弹出的时候记录一下当前位置，然后在弹出层消失的时候js控制滚动到之前的位置