冻结滚动

某些场景下，我们需要冻结页面滚动，比如弹窗展示时

方案汇总

冻结滚动一般有两种方案：

1. 通过preventDefault阻止默认事件，使滚动手势无效
2. 通fixed过定位，使页面固定在某一屏的位置，这里需要结合页面的scrollTop值，将固定定位的top值设置一下

preventDefault

思路：通过监听touchmove事件，在手势滑动的时候，通过ev.preventDefault阻止默认事件，使滚动行为无效

• 检查passive是否支持：passive support check

原理

当passive设置为true时，listener将永远不会调用preventDefault()，即使代码中显式声明了语句，也不会调用。 所以需要手动设置passive为false

core code

document.body.addEventListener('touchmove', function(ev) {
  ev.preventDefault()
}, {
  passive: false,
  once: true,
})

注意事项

1. el.addEventListener.option的默认值为false，但是由于主流浏览器的滚动优化策略，以下三个节点的touchstart、touchmove事件的passive默认值为true

• window
• document
• document.body

fixed & overflow

思路

通过fixed定位以及overflow: hidden动态切换，使可滚动区域固定

注意

部分场景可能需要结合scrollTop使用，防止视图位置

demo

在chrome浏览器中，切换到手机模式，执行这段代码并尝试手势滑动页面

–

[1] EventTarget.addEventListener()