vue弹窗后如何禁止滚动条滚动？

原文地址

---

常见场景

在许多填写表单的页面中，都会弹出一个选择器，让你在弹窗中选择项目。有时，弹窗本身容纳不下内容，需要让它不断滚动来展示，但因为事件是冒泡的，有时就会造成底部（body 的Z-index肯定是在下面的 ）的内容也在滚动。这内外一起滚，就有点尴尬了。

举例，下面两张图里，都有类似的问题。那么怎么解决呢？

---

从event. target入手

一种思路就是从事件入手，如果事件对象不是弹窗的话，就让它什么都不做。

（其实这里有个疑惑，为什么不能通过阻止冒泡来阻止外层的body滚动呢？换了好几个事件类型都不行，不管是scroll还是touchmove，很奇怪。
实践发现，touchmove事件的确不会冒泡了，但body仍然在滚动。。。那我不就不知道事件实现的机制到底是什么了，而且用浏览器模拟的移动端，也不知道是不是模拟有误。。。
总之，event.stopPropagation() 方法在这里不是很管用。。。
）。

比如图一中的每一栏滚动条，classname为listcol，而弹窗为.listcol，那么可以这么做：

			$('.box--listcol').on('touchmove', function(event) {

				if(event.target.className.indexOf('listcol') === -1){

					event.preventDefault()
				}

			});
// 忽略奇怪的缩进，直接从代码里粘贴出来的

还是直接干body吧

从event入手虽好，但那样一来，每一个弹窗都要单独绑一个事件，而且！！！很恶心的是，如果有个反人类的操作，比如内容明明无需滚动，却绑了事件，就仍然会在滚内容的时候带动外层滚动。。。。（此时内容是不会滚的，因为高度足够容纳了）。

可能表述的不是很清晰，图二中，滚动区域的classname 为 jobscrollcontainer, 弹窗本身为box–job。

		$('.box--job').on('touchmove',function(e){

			if(!$(e.target).parents().filter('.jobscrollcontainer').length){

				e.preventDefault()
			}

		})

正常操作的时候是可以的。但如果不能滚动硬滚，那就抓瞎了。

所以，还是要从根子抓起，比如，就固定body不让它滚！

function toggleBody(isPin){

	if(isPin){

		document.body.style.height = '100vh'

		document.body.style['overflow-y'] = 'hidden'
	}

	else{

		document.body.style.height = 'unset'

		document.body.style['overflow-y'] = 'auto'

	}
}

toggleBody(1)  //在跳出弹窗的时候
toggleBody(0)  //弹窗消失的时候

超长的页面怎么办呢（2018-11更新）

上面直接限制body固然有效，但如果一个页面很长很长，超出了100vh，而我正好滚到中间时弹出弹窗。此时若直接限制body的overflow: hidden则会让页面一下弹到顶部，显然不是好的做法。那么，又该怎么做呢？

对移动端，可以引入touch-action，限制为none，在弹窗消失时再变回auto。但ios的safari上不支持该属性（可以去caniuse上查查，起码2018.11的时候还不支持）。如果我们的app在ios上用的是safari内核，就起不到效果了。

这时候，就需要结合event.preventDefault属性来用了。注意在绑定addEventListener的时候，需要多传一个options，强调这个事件不是passive的，否则谷歌等新版浏览器会报错。同时最好也指定capture: true，这样可以早点禁止该事件。

报错是Unable to preventDefault inside passive event listener due to target being treated as passive.。这是因为谷歌从chrome51之后引入的新优化。事实上，谷歌建议一般情况下，将 passive 标志添加到每个没有调用 preventDefault() 的 wheel、mousewheel、touchstart 和 touchmove 事件侦听器。但是，对于这种禁止了默认事件的eventListener，在这种情况下，反而是要强调它不是消极监听的。因为滚动都不能滚了，无所谓什么优化了。

代码如下（vue版本的）：

 watch: {
    show(v) {
      this.toggleContainerTouchAction(v)
      if (v) {
        document.body.addEventListener('touchmove', this.stopTouch, { passive: false, capture: true })
      } else {
        document.body.removeEventListener('touchmove', this.stopTouch, { capture: true })
      }
    },
  },
  methods: {
    toggleContainerTouchAction(v) {
      const container = document.querySelector('.container')
      if (!container) {
        return
      }
      container.style['touch-action'] = v ? 'none' : 'auto'
    },
    stopTouch(e) {
      e.preventDefault()
    },

conclusion

直接锁定body在移动端和web都适用，但如果是从事件入手的话，就要根据需要选择到底是用touch 还是 mousewheel 了。

酌情使用吧，如果一个页面中有很多不同的弹窗，那么对每一个弹窗的蹦出和消失都加上toggleBody事件也是挺烦的。。。也要考虑到用什么工具做的页面，如果是框架的话，在组件里绑会相对简洁一些。。。

---

返回目录