当前位置:编程学习 > JS >>

分享js禁止页面滚动代码

在web页面中,经常遇到一些弹窗内部有滚动条,可以滚动,弹窗后面的文档流也可以滚动,两个滚动区域会相互影响,用户体验不太好。

方案一、封装禁止、允许滚动方法

1、弹出弹窗,禁止滚动,并停留在当前位置

const disableScroll = (domId) => {
  var scrollTopVal = document.documentElement.scrollTop || document.body.scrollTop;
  // 禁止滑动
  const selectId = domId || 'app'
  const selectDom = document.getElementById(selectId)
  if (selectDom && selectDom.style.position !== 'fixed') {
    selectDom.style.position = 'fixed'
    selectDom.style.top = '-' + scrollTopVal + 'px'
    selectDom.style.width = '100%'
    selectDom.style.overflow = 'hidden'
  }
}
2、关闭弹窗,恢复滚动,并恢复在停留位置

const enableScroll = (domId) => {
  /** *取消滑动限制***/
  const selectId = domId || 'app'
  const selectDom = document.getElementById(selectId)
  if (selectDom && selectDom.style.position === 'fixed') {
    var scrollVal = Math.abs(parseFloat(selectDom.style.top))
    selectDom.style.position = ''
    selectDom.style.overflow = ''
    selectDom.style.top = ''
    if (document.body) {
      document.body.scrollTop = scrollVal
    }
    if (document.documentElement) {
      document.documentElement.scrollTop = scrollVal
    }
  }
}
方案二:使用npm包

npm包地址:no-scrolling - npm

npm i no-scrolling -S
 
import { disableScroll, enableScroll } from 'no-scrolling'
 
disableScroll()
// enableScroll()
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,