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

一时失言乱红尘 2022-05-24 07:06 297阅读 0赞

本文转自：[https://uedsky.com/2016-06/mobile-modal-scroll/][https_uedsky.com_2016-06_mobile-modal-scroll]

## 问题 ##

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

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

## css 之 `overflow: hidden` ##

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

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

1.  由于 html 和 body的滚动条都被禁用，弹出层后页面的滚动位置会丢失，需要用 js 来还原。
2.  页面的背景还是能够有滚的动的效果

## 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个缺点都解决了，至此滚动穿透就**完美解决了**。

[**完整的示例**][Link 1]

## document.scrollingElement ##

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

## 参考 ##

*  [https://github.com/twbs/bootstrap/issues/15852][https_github.com_twbs_bootstrap_issues_15852]
 *  [https://imququ.com/post/document-scrollingelement-in-chrome.html][https_imququ.com_post_document-scrollingelement-in-chrome.html]
 *  [https://github.com/mathiasbynens/document.scrollingElement][https_github.com_mathiasbynens_document.scrollingElement]
 *  [https://segmentfault.com/q/1010000002942948][https_segmentfault.com_q_1010000002942948]

[https_uedsky.com_2016-06_mobile-modal-scroll]: https://uedsky.com/2016-06/mobile-modal-scroll/
[Link 1]: https://uedsky.com/demo/modal-scroll.html
[Link 2]: https://developer.mozilla.org/en-US/docs/Web/API/document/scrollingElement
[polyfill document.scrollingElement.js]: https://github.com/yangg/scrolling-element
[https_github.com_twbs_bootstrap_issues_15852]: https://github.com/twbs/bootstrap/issues/15852
[https_imququ.com_post_document-scrollingelement-in-chrome.html]: https://imququ.com/post/document-scrollingelement-in-chrome.html
[https_github.com_mathiasbynens_document.scrollingElement]: https://github.com/mathiasbynens/document.scrollingElement
[https_segmentfault.com_q_1010000002942948]: https://segmentfault.com/q/1010000002942948