【问题解决】body设置overflow：hidden之后移动端还是可以滑动

在一次H5项目中(hisense)，有一个小功能：页面中图片(小图)点击后出现浮层（半透明效果），用来展示大图。这个时候如果滑动页面的话，浮层底部会进行滑动，效果很不好。

因此，当查看大图的时候，会阻止页面滑动效果：

// 查看大图时禁止滑动
document.body.style.overflow = 'hidden';

// 取消大图查看时允许滑动
document.body.style.overflow = 'auto';

在电脑上调试效果如设想的一样，但是用手机，不管是安卓还是ios，都不起作用，点开大图后底层还是能够滑动...

网上说这是因为移动端浏览器内核阻止了这种效果...一般有如下三种解决方案：

方法一：body上还要添加position：fixed

// 我们用css来分别展示两种效果 就不用js了 

// 正常状态下
body {
　　height：100%；
}

// 出现浮层时添加
body.scroll {
  overflow: hidden;
  position: fixed;    
}

// 取消浮层时添加
body {
    overflow: auto;
    position: static;
}

这种方法有一个弊端：

当我们滑动一段距离页面，然后点击页面中的小图展示浮层大图时，由于body设置了position: fixed，整个body页面会瞬间滑到顶部，这样就导致，当你取消浮层之后，就不知道自己刚刚是滑动到哪了...

 

方法二：给滑动的盒子外面再包裹一个盒子，将其设置overflow：hidden

// 比如我们的主要内容盒子是box 然后在外面添加over盒子

// 正常情况下：
.over {
    height: 100%;
}

// 出现浮层时添加
over {
    overflow: hidden;
}

// 取消浮层时添加
over {
    overflow: auto;
}

这个方法也有弊端：

一是要平白无故添加一层，可能会导致页面样式有点变化；二是如果在项目中，我们的内容盒子box并不是覆盖整个窗口，而是距离顶部有一段距离，并且背景还设有背景图片，这个时候如果取消图层（over盒子添加了overflow：auto），然后滑动页面你会发现，背景图片没有动，而是内容盒子box在滑动。当然，如果你正好是需要这种效果，那自然是好的...

 

方法三：取消浮层的滑动事件

var shade = document.getElementByClassName('shade')[0];

shade.ontouchmove = function (event) {
    event.preventDefault();
}

这个方法兼容性强，效果好，弊端就是如果你的浮层自己也有滚动，那这样设置后会导致浮层自己的滚动事件也没法触发....

 

【总结】

上述三种方法各有利弊，根据具体情况选取吧~

 

【参考文章】

移动端设置overflow：hidden后为何还能滚动

web移动端浮层滚动阻止window窗体滚动