滚动穿透

什么是滚动穿透

有一层遮罩层覆盖在 body 上时,当我们滚动遮罩层,它下面的内容也会跟着一起滚动,看起来好像是上面的滚动事件穿透到下面的 DOM 元素上一样,我们称之为滚动穿透

原理是什么?

阻止冒泡

滑动可以,但是滑到顶部或者底部,会穿透穿透原因是因为虽然阻止了容器中的冒泡,但是滑过去后就会监听 body 上的滚动(只要 你有高度)

在 PC 端是怎么样?

移动端又改如何做?

React 版本的 该怎么做?

别人家的类库

他们的源码解决方案

在弹出弹出框的时候,给 body 加 postion:fixed; top: 0

https://segmentfault.com/a/1190000040675446open in new window

参考资料

Last Updated:
Contributors: johan