zoukankan      html  css  js  c++  java
  • 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()

    pc端方案:

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

    <div class="overlayer" @scroll.prevent >
        </div>
  • 相关阅读:
    CSS Grid网格布局全攻略
    正则表达式不要背
    前端模块化的前世今生
    关于React Hooks,你不得不知的事
    精简版LINUX系统---wdOS
    TypeScript_泛型
    typescript_类
    ES5_对象 与 继承
    TypeScript_基础数据类型
    vue-route+webpack部署单页路由项目,访问刷新出现404问题
  • 原文地址:https://www.cnblogs.com/qhantime/p/11700984.html
Copyright © 2011-2022 走看看