移动端禁止弹出层背景滚动

场景：
背景内容超出屏幕高度，需滚动展示；
底部弹窗内容超出底部容器高度，需在容器内滚动展示；
当底部弹窗打开，需阻止背景的滚动！

方案一：
弹出层出现时设置 document.body.style.overflow = 'hidden';
弹出关闭设置document.body.style.overflow = 'auto';

image.png

方案二：
设置html、body默认height: 100%;
并且弹出层出现时设置：

document.getElementsByTagName('html')[0].style.overflow = 'hidden';
document.body.style.overflow = 'hidden';

image.png

PC和移动端都可以禁止背景滚动，但是当页面往下滚动一段距离，也就是说当document.body.scrollTop 大于0时，点开弹出层背景都会弹回到最顶部。

由于页面是超出一个屏幕高度的，所以可以滚动，但是现在把页面高度设为一个屏幕高度 100%，并且 overflow:hidden，那么根据 overflow:hidden的特性，浏览器肯定是要从页面的头部开始截取一个屏幕的高度，剩下的再 hidden。因此背景页面会弹回到最顶部。

方案三：

document.body.addEventListener('touchmove',this.stopScroll)
document.body.style.overflow = 'hidden';

移动端阻止touchmove事件即可。参考

方案四：
设置html,body默认样式

html, body{
    height: 100%;
    overflow: auto;
}

当弹出出现时，设置

document.body.style.overflow = 'hidden';

可解决移动端和PC端的问题，这里注意必须设置body和html元素的overflow值为auto或者scroll，因为overflow的默认值是visible，溢出的内容会在父元素外显示。