js禁止页面滚动
Posted 方小川
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js禁止页面滚动相关的知识,希望对你有一定的参考价值。
开发移动端页面的时候有一个很比较常见的需求,在出现弹窗时,禁止滑动弹窗后面的主体页面。如何实现呢,往下看
js实现整个页面禁止滚动:
document.body.addEventListener(‘touchmove‘, function(e){ e.preventDefault(); }, { passive: false }); //passive 参数不能省略,用来兼容ios和android
passive是干吗用的呢,设置该属性的目的主要是为了在阻止事件默认行为导致的卡顿。等待监听器的执行是耗时的,有些甚至耗时很明显,这样就会导致页面卡顿。即便监听器是个空函数,也会产生一定的卡顿,毕竟空函数的执行也会耗时。加上{ passive: false }能防止页面卡顿。
我们可以通过传递 passive 为 true 来明确告诉浏览器,事件处理程序不会调用 preventDefault 来阻止默认滑动行为。如果设置了passive为true,同时又阻止默认行为,阻止是不生效的
document.addEventListener("touchmove", function(event) { event.preventDefault() //不产生作用 }, {passive: true});
vue里面直接在html模板里处理:
<div v-show="showSelect" class="bill_class" @touchmove.prevent>
如果在这个div中滑动,触发的事件会经过showSelect,可以阻止被该弹框盖在下面的页面滑动
</div>
.prevent是VUE里的事件修饰符,用来阻止默认事件,相当于 event.preventDefault()
以上是关于js禁止页面滚动的主要内容,如果未能解决你的问题,请参考以下文章
JS怎么禁止鼠标滚轮的单击 IE下! 注意是滚轮去单击 而不是滚动!