当我坐在那架破旧古钢琴旁边的时候,我对 最幸福的国王也不羡慕。—— 海顿

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

问题

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

之前搜索了一圈,找到下面两种方案<!-- more -->

css 之 overflow: hidden

.modal-open {
  &, body {
    overflow: hidden;
    height: 100%;
  }
}
  • 由于 html 和 body的滚动条都被禁用,弹出层后页面的滚动位置会丢失,需要用 js 来还原
  • 页面的背景还是能够有滚的动的效果

js 之 touchmove + preventDefault

modal.addEventListener('touchmove', function(e) {
  e.preventDefault();
}, false);
  • 弹出层里不能有其它需要滚动的内容(如大段文字需要固定高度,显示滚动条也会被阻止)

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

解决方案 position: fixed

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

完整的示例

document.scrollingElement

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

参考

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


分享

分享本文章

文章来源
151910

佚名 2016-10-19

标签

right left pencil2 css3 node design eye tags search rss back user pacman film