Skip to main content

禁止页面滚动

PC/移动端​

启用禁用时，设置js

document.documentElement.style.overflowY = 'hidden';

当还原时候，只需要把属性重置scroll就可以了

document.documentElement.style.overflowY = 'scroll';

JS-设置弹窗时候禁用滚动条

移动端​

单独对 touchmove 通过 AddEventListener 方法去注册事件监听了

// 为元素添加事件监听   
document.getElementById('nonius').addEventListener("touchmove", (e) => {
  // 执行滚动回调
  this.sidebarTouchMove(e)
}, {
  passive: false //  禁止 passive 效果
})

FAQ​

针对 iOS端禁止列表顶部下拉和底部上拉露出浏览器灰色背景 的解决方案

链接​

JS-设置弹窗时候禁用滚动条 禁止页面滚动踩坑实践与方案梳理 react,页面弹窗时，阻止页面滚动