【解决方案】H5 页面滚动穿透 overflow:hidden 失效

在h5页面上，如果想要让页面禁止滚动。一般通过给 body 元素 overflow:hidden;进行设置。

但是，在部分安卓机上，上述操作并不会生效。因此，我们通过 fixed 布局来解决这个问题。

当我们想要禁止页面滚动时，设置下面的属性，即可生效:

// 设置 fixed 布局
document.body.style.position = 'fixed';
document.body.style.height = '100%';
document.body.style.width = '100%';

如果，又想恢复到禁止滚动之前的状态，可以进行如下设置:

// 还原默认布局
document.body.style.position = 'relative';
document.body.style.height = 'auto';
document.body.style.width = '100%';

应用场景
当一个h5页面，主页面（外层页面）是一个滚动的list，点击某一项之后，将会弹出弹窗，弹窗的内部又是一个list。这样就会有两个滚动的list页面。页面结构如下图:

目标

1. 滚动弹窗List,外层页面不可以滚动
2. 关闭弹窗之后，外层页面可以滚动

思路

1. 当打开弹窗的时候，禁用外层页面滚动

// 设置 fixed 布局
document.body.style.position = 'fixed';
document.body.style.height = '100%';
document.body.style.width = '100%';

2. 当关闭弹窗的时候，恢复外层页面滚动

// 还原默认布局
document.body.style.position = 'relative';
document.body.style.height = 'auto';
document.body.style.width = '100%';

新的问题
不过，当我们设置 fixed布局之后，会发现外层页面不会停留在原来位置，而是被置顶了。这显然不是我们的预期结果。

因此，我们可以将原来的设置进行改进:

// 保存当前的滚动距离
let scrollTop =
 document.documentElement.scrollTop || document.body.scrollTop;
// 设置 fixed 布局
document.body.style.position = 'fixed';
document.body.style.height = '100%';
document.body.style.width = '100%';

// 还原默认布局
document.body.style.position = 'relative';
document.body.style.height = 'auto';
document.body.style.width = '100%';
// 恢复到禁止时的位置
window.scrollTo(0, scrollTop);

可以看到，我们保存了页面设置 fixed 前的滚动距离 scrollTop，当我们关闭弹窗的时候，再通过 window.scrollTo 恢复到原来位置。这样的交互，基本满足我们的需求了。