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()