vue滚动条禁止_js禁止和开启滚动条事件

开发移动端页面的时候有一个很比较常见的需求，在出现弹窗时，禁止滑动弹窗后面的主体页面。如何实现呢，往下看

js实现整个页面禁止滚动：document.body.addEventListener('touchmove', function (e) {

e.preventDefault();

}, { passive: false });

passive是干吗用的呢，设置该属性的目的主要是为了在阻止事件默认行为导致的卡顿。等待监听器的执行是耗时的，有些甚至耗时很明显，这样就会导致页面卡顿。即便监听器是个空函数，也会产生一定的卡顿，毕竟空函数的执行也会耗时。加上{ passive: false }能防止页面卡顿。

我们可以通过传递 passive 为 true 来明确告诉浏览器，事件处理程序不会调用 preventDefault 来阻止默认滑动行为。如果设置了passive为true，同时又阻止默认行为，阻止是不生效的document.addEventListener("touchmove", function(event) {

event.preventDefault() //不产生作用

}, {passive: true});

关闭弹框时开启页面滚动document.body.removeEventListener('touchmove', function (e) {

e.preventDefault();

}, false);

vue里面直接在html模板里处理：

//如果在这个div中滑动，触发的事件会经过showSelect，可以阻止被该弹框盖在下面的页面滑动

prevent是VUE里的事件修饰符，用来阻止默认事件，相当于 event.preventDefault()

pc端方案：

这种屏蔽方式只是屏蔽了滑动，对于PC端的鼠标滚轮是无效的，但屏蔽鼠标滚轮也很简单，把 touchmove 事件处理器改成 scroll 事件的处理器就好了