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

sewerganger 发布于2019-08-19 18:26 / 2543人阅读

摘要：问题众所周知，移动端当有遮罩背景和弹出层时，在屏幕上滑动能够滑动背景下面的内容，这就是著名的滚动穿透问题之前搜索了一圈，找到下面两种方案之页面弹出层上将添加到上，禁用和的滚动条但是这个方案有两个缺点由于和的滚动条都被禁用，弹出层

问题

众所周知，移动端当有 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://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://github.com/twbs/boots...

https://imququ.com/post/docum...

https://github.com/mathiasbyn...

https://segmentfault.com/q/10...

原文地址：https://uedsky.com/2016-06/mobile-modal-scroll/
获取最佳阅读体验并参与讨论，请访问原文

GPU云服务器云服务器 js移动端向上滚动刷新数据移动端适配方案移动端移动安全问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79620.html

滑动穿透(锁body)终极探索

摘要：场景当页面出现浮层的时候，滑动浮层的内容，正常情况下预期应该是浮层下边的内容不会滚动然而事实并非如此。当属性的值为的时候，代表该监听器内部不会调用函数来阻止默认滑动行为，浏览器称这类型的监听器为被动监听器。场景当页面出现浮层的时候，滑动浮层的内容，正常情况下预期应该是浮层下边的内容不会滚动；然而事实并非如此。showImg(https://user-gold-cdn.xitu.io...

Michael_Lin 2019-08-23 17:04 评论0 收藏0
滑动穿透(锁body)终极探索

摘要：场景当页面出现浮层的时候，滑动浮层的内容，正常情况下预期应该是浮层下边的内容不会滚动然而事实并非如此。当属性的值为的时候，代表该监听器内部不会调用函数来阻止默认滑动行为，浏览器称这类型的监听器为被动监听器。场景当页面出现浮层的时候，滑动浮层的内容，正常情况下预期应该是浮层下边的内容不会滚动；然而事实并非如此。showImg(https://user-gold-cdn.xitu.io...

RaoMeng 2019-08-29 18:40 评论0 收藏0
【前端词典】滚动穿透问题的解决方案

摘要：接下就说下我对滚动穿透问题解决方案探索的过程，希望对大家有点启发。心想来了突然意识到写弹窗的时候忘记处理滚动穿透的问题了。下期预告前端词典继承必懂知识点传送门前端词典代理的概念及其应用前端词典滚动穿透问题的解决方案背景产品有三宝，弹窗，浮层加引导；设计有三宝，透明，阴影加圆角；运营有三宝，短信，推送加红包；程序员有一宝，这个做不了。随着移动端市场的份额越大，需求就越多...

_Dreams 2019-08-30 15:55 评论0 收藏0
【前端词典】滚动穿透问题的解决方案

摘要：接下就说下我对滚动穿透问题解决方案探索的过程，希望对大家有点启发。心想来了突然意识到写弹窗的时候忘记处理滚动穿透的问题了。下期预告前端词典继承必懂知识点传送门前端词典代理的概念及其应用前端词典滚动穿透问题的解决方案背景产品有三宝，弹窗，浮层加引导；设计有三宝，透明，阴影加圆角；运营有三宝，短信，推送加红包；程序员有一宝，这个做不了。随着移动端市场的份额越大，需求就越多...

mzlogin 2019-08-23 14:35 评论0 收藏0