移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究

PC端解决方案

pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条，达到无法滚动的效果。

也就是说给body添加overflow：hidden属性即可，IE6、7下不会生效，需要给html增加overflow:hidden属性。

 

要制作这个效果在PC端非常简单，只需要设置html的高度为100%占满屏幕，并且将html的overflow设置为hidden，即可保证页面不可滚动。

但是同样的问题在移动端情况就有所区别。仅仅设置html的上列属性，在移动端仍然无法禁止页面超出部分的滚动，我们需要设置下面的代码才能在弹框出现的时候禁止页面滚动：

 

html.style.overflow="hidden";

html.style.height="100%";

body.style.overflow="hidden";

body.style.height="100%";

 

原因是因为移动端是基于touch事件，要禁止基于touch事件的滚动，我们必须在对html禁止滚动的基础之上，再将需要禁止滚动的内容上再增加一个包裹层块级元素，然后将这个包裹层块级元素高度设置为100%并设置overflow:hidden;，那么在这里我们认为body包裹了整个页面，正是我们需要的块级元素，将他也设置为禁止滚动，就可以保证移动端页面的滑动时间不会触发页面滚动。

当用户关闭了弹框，页面也就恢复正常，我们设置如下CSS样式属性来还原整个页面的滚动效果：

 

html.style.overflow="visible";

html.style.height="auto";

body.style.overflow="visible";

body.style.height="auto";

 

这些样式正是对应CSS属性的默认样式。

然而这个方案有一个缺陷，就是ios系统下不兼容，黑幕的效果没法阻止页面的滚动。下面介绍移动端的另一种解决方案。

 

 

移动端解决方案

正是因为移动端的滚动基于屏幕的touch事件，因此诞生了方案二（手机淘宝就使用了这种方案）。

首先我们需要知道两个前提知识点：1、重叠的两个页面元素，z-index值更高的会优先触发事件监听，从而可以在此控制是否让事件流继续；2、移动端滚动的touch事件，基于事件流。

有了上面两个知识点的基础，我们就可以来理解这种方案的设计思路。方案二的原理是：不对原页面进行任何改动，仅仅只是用一个拥有更高z-index值的，布局为absolute或者fixed布局的黑幕（长宽100%）来挡住整个页面，并且监听黑幕的touchmove事件，在touchmove事件内结束事件流，从而阻挡事件流继续。这样，能够产生滚动效果的touch事件就传不到页面上，也就不会发生滚动。

 

移动端取消滚动条是达不到效果的，这时就需要去除遮罩层和按钮层的touchmove的默认事件，代码如下：

 mask.addEventListener("touchmove",function(e){

                    e.stopPropagation();

                    e.preventDefault();

                },false);

 

后来我把e.stopPropagation()注释了，没有禁止事件冒泡，在遮罩弹出后touchmove以为页面应该会滚动，但是页面还是不滚动。然后我在页面加了

document.getElementsByTagName(‘body’)[0].addEventListener("touchmove", function(){
   alert(‘hello’);
})

;遮罩弹出后，手指touchmove滑动页面不会滚动,但是会alert(‘hello’);，说明事件还是冒泡了，只是touchmove没有传到页面上。猜测可能是这个原因，touchmove事件只针对第一次触发的最上层的容器，而不会冒泡传递。