挪动端转动穿透题目圆满解决方案

2024年3月31日 196次阅读 来源: brook

题目

尽人皆知，挪动端当有 fixed 遮罩背景和弹出层时，在屏幕上滑动可以滑动背景下面的内容，这就是有名的转动穿透题目

之前搜刮了一圈，找到下面两种计划
<!– more –>

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://uedsky.com/demo/src/polyfills/document.scrollingElement.js
  */
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

参考

原文地点：https://uedsky.com/2016-06/mobile-modal-scroll/
猎取最好浏览体验并介入议论，请接见原文

    原文作者：brook
    原文地址: https://segmentfault.com/a/1190000005617307
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞