处理弹窗后页面滚动问题我们在封装弹窗时，有时会出现，我们弹窗后面的滚动页面仍然可以滚动，我们希望的是，弹层起来时，页面后

前言

我们在封装弹窗时，有时会出现，我们弹窗后面的滚动页面仍然可以滚动，我们希望的是，弹层起来时，页面后端的滚动内容停止滚动，这样我们的弹窗效果看起来优先级更高，体验更好

我们可能会考虑监听滚动事件，将滚动事件阻止，取消弹层后取消监听事件

默认使用(问题初现)

function handler(e) {
    e.preventDefault();
}

window.addEventListener("wheel", handler);
window.removeEventListener('wheel', handler)

可是上面设置了之后，在一些浏览器中，会出现一堆错误事件，仍然无法阻止滚动的默认行为

此时就和浏览器的优化有关了，有些浏览器，会默认开启事件优化，因此会忽略用户的一些设置的一些行为，其中就包括阻止事件的 preventDefault 行为

解决方案(关闭游览器默认的事件优化)

那么我们怎么做呢？

只需要设置监听的第三个参数 passive: false 即可

这个参数有被动的优化的意思，passive 默认为 true，也就是默认被动开启浏览器事件优化，其会阻止一些用户行为

当设置为 passive: false 的时候，意味着取消被动优化，也就是开发者可以自行做一些操作，停止优化，此时被优化的的 preventDefault 取消滚动事件，就可以生效了

function handler(e) {
    e.preventDefault();
}

window.addEventListener("wheel", handler, {
    passive: true, //默认为true
});
window.removeEventListener('wheel', handler)

overflow方案：有时候我们也会采取更原始的方案解决问题，那就是设置 overflow，可以取消页面的滚动事件，此时就解决问题了(很多直接取body节点取消，弹窗结束恢复)，但也😂有一个问题，就是取消 overflow 后滚动条会消失而闪动，追求细节的有的直接隐藏滚动条了