移动端滚动穿透问题完美解决方案

问题

众所周知，移动端当有 fixed 遮罩背景和弹出层时，在屏幕上滑动可以滑动背景下面的内容，这就是臭名昭著的滚动穿透问题

以前搜索了一圈，找到下面两种方案

css 之 overflow: hidden

.modal-open {
 &, body {
 overflow: hidden;
 height: 100%;
 }
}

页面弹出层上将 .modal-open 添加到 html 上，禁用 html 和 body 的滚动条
可是这个方案有两个缺点：

• 因为 html 和 body的滚动条都被禁用，弹出层后页面的滚动位置会丢失，须要用 js 来还原
• 页面的背景仍是可以有滚的动的效果

js 之 touchmove + preventDefault

modal.addEventListener('touchmove', function(e) {
 e.preventDefault();
}, false);

这样用 js 阻止滚动后看起来效果不错了，可是也有一个缺点：

• 弹出层里不能有其它须要滚动的内容（如大段文字须要固定高度，显示滚动条也会被阻止）

上面两个方案都有缺点，今天用英文关键字 google 了一下，才发现原来还有更好的方案

解决方案 position: fixed

body.modal-open {
 position: fixed;
 width: 100%;
}

若是只是上面的 css，滚动条的位置一样会丢失
因此若是须要保持滚动条的位置须要用 js 保存滚动条位置关闭的时候还原滚动位置

/**
 * ModalHelper helpers resolve the modal scrolling issue on mobile devices
 * https://github.com/twbs/bootstrap/issues/15852
 * requires document.scrollingElement polyfill https://github.com/yangg/scrolling-element
 */
var ModalHelper = (function(bodyCls) {
 var scrollTop;
 return {
 afterOpen: function() {
 scrollTop = document.scrollingElement.scrollTop;
 document.body.classList.add(bodyCls);
 document.body.style.top = -scrollTop + 'px';
 },
 beforeClose: function() {
 document.body.classList.remove(bodyCls);
 // scrollTop lost after set position:fixed, restore it back.
 document.scrollingElement.scrollTop = scrollTop;
 }
 };
})('modal-open');

这样上面3个缺点都解决了，至此滚动穿透就完美解决了

document.scrollingElement

由于浏览器获取和设置 scrollTop 存在兼容性，为了简化上面的示例，我直接使用了 document.scrollingElement 这个新标准，对于不支持的浏览器我写了个 polyfill document.scrollingElement.js