PC端/移动端如何禁止底层页面滚动

今天在写一个首页，移动端底部有个导航按钮，导航里的选项只有在点击导航按钮时才会以弹出层/遮罩层的方式显示。如下图所示：

用js和css3写完动画后，在PC上的chrome浏览器里测试手机的效果时，没有问题，鼠标拖动/滚动，遮罩层底下的body可以滚动。但是拿手机真机测试时，出现以下问题：

Safiri/Andriod手机自带浏览器：遮罩层显示后，手指滑动屏幕，浏览器底部自带的导航栏会自动隐藏，遮罩层就会往下移动浏览器自带导航栏高度的距离，导致页面顶部出现同样高度的无遮罩层覆盖的区域。然后等自带的导航栏全部隐藏后，顶部的露白也消失。原因是，遮罩层的高度设置的是100%，浏览器自带导航栏消失导致前后浏览器的视口高度不一样，所以动态变化了。见下图：

解决问题的方法是：给body增加监听事件，当遮罩层出现时，禁止屏幕触摸移动事件，消失时恢复。

方法一：

document.body.parentNode.style.overflow = "hidden";  //禁止横竖向滚动条

document.body.parentNode.style.overflow = "auto";  //恢复横竖向滚动条

以上代码在PC端上有效，但是在移动端失效。因此需要方法二。

方法二：

1、先创建一个函数：

function bodyScroll(e){
   e.preventDefault();   //取消事件默认动作
   e.stopPropagation();  //不再派发事件
}

2、然后在遮罩层出现后增加监听事件函数：

document.addEventListener("touchmove",bodyScroll,false);

3、在遮罩层小时候去除增加的监听事件函数：

document.removeEventListener("touchmove",bodyScroll,false);

此方法在移动端的Safiri/Chrome/QQ浏览器都是有效的，在UC浏览器无效，手指滑动还是会滚动，但是不会露白了。

方法二，我是在这里看的人家写的文章：

JS添加事件和解绑事件：addEventListener()与removeEventListener()

点击打开链接