弹框时，禁止页面滚动实现方法

是不是还有很多小伙伴还在被这个问题困扰，今天就分享一次我在项目中解决这个问题的方法。倒计时3，2，1开始进入正题：

原理：利用css中的overFlow: hidden思想通过js代码实现。如果单纯的用这个属性，页面会滚回到顶部，带来不好的用户体验，具体实现如下代码：

• 获取浏览器滚动条宽度：

getScrollbarWidth () {
    let oP = document.createElement('p')
    let styles = {
      width: '1000px',
      height: '1000px',
      overflowY: 'scroll'
    }
    let i = 0
    let scrollbarWidth = 0
    for (i in styles) {
      oP.style[i] = styles[i]
    }
    document.body.appendChild(oP)
    scrollbarWidth = oP.offsetWidth - oP.clientWidth
    oP.remove()
    return scrollbarWidth
  }

• 阻止页面滚动事件定义

 stopScroll () {
    let mo = function (e) {
      e.preventDefault()
      e.stopPropagation()
    }
    let _width = this.getScrollbarWidth()
    document.body.style.overflow = 'hidden'
    document.body.style.paddingRight = _width + 'px'
    document.addEventListener('touchmove', mo, false)
  }

• 恢复页面滚动事件

 moveScroll () {
    let mo = function (e) {
      e.preventDefault()
      e.stopPropagation()
    }
    document.body.style.overflow = ''
    document.body.style.paddingRight = 0
    document.removeEventListener('touchmove', mo, false)
  }

在需要使用的地方调用stopScroll即可,调用后记得恢复页面滚动事件moveScroll，这里获取浏览器滚动条的宽度主要是优化了页面出现闪烁的效果

后续还会持续更新一些项目中遇到的问题的解决方案，在这里和大家一起学习进步，希望提供更多更好的方案，可以Q我，谢谢大家