AI写作智能体 自主规划任务,支持联网查询和网页读取,多模态高效创作各类分析报告、商业计划、营销方案、教学内容等。 广告
阻止页面滚动 [https://www.cnblogs.com/wxcbg/p/10452985.html](https://www.cnblogs.com/wxcbg/p/10452985.html) ~~~ // document.body.style.overflow="hidden"; // document.body.style.overflow=""; document.addEventListener('touchmove', function(e){ e .preventDefault(); }, {passive: false}); document.removeEventListener('touchmove', function(e){ e .preventDefault(); }, {passive: false}); ~~~ ***** passive是干吗用的呢,设置该属性的目的主要是为了在阻止事件默认行为导致的卡顿。等待监听器的执行是耗时的,有些甚至耗时很明显,这样就会导致页面卡顿。即便监听器是个空函数,也会产生一定的卡顿,毕竟空函数的执行也会耗时。加上{ passive: false }能防止页面卡顿。 我们可以通过传递 passive 为 true 来明确告诉浏览器,事件处理程序不会调用 preventDefault 来阻止默认滑动行为。如果设置了passive为true,同时又阻止默认行为,阻止是不生效的 ***** **vue里面直接在html模板里处理:** ~~~ <div v-show="showSelect" class="bill_class" @touchmove.prevent> //如果在这个div中滑动,触发的事件会经过showSelect,可以阻止被该弹框盖在下面的页面滑动 </div> ~~~ .prevent是VUE里的事件修饰符,用来阻止默认事件,相当于 event.preventDefault() *pc端方案:* 这种屏蔽方式只是屏蔽了滑动,对于PC端的鼠标滚轮是无效的,但屏蔽鼠标滚轮也很简单,把 touchmove 事件处理器改成 scroll 事件的处理器就好了 ~~~ <div class="overlayer" @scroll.prevent ></div> ~~~