vue禁止页面滚动条_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') =