zoukankan      html  css  js  c++  java
  • 跳出弹窗页面禁止滚动(PC端和手机端)

    pc端如何实现

    1.当弹窗显示时,为body元素添加属性:overflow:hidden, 当关闭弹窗时移除该属性即可
    2.在弹窗的div上设置 @scroll.stop.prevent

    3.前端页面弹框遮罩禁止页面滚动

    <div @scroll.stop.prevent>
     你要显示的内容
    </div>
    

    3.出现弹窗时,为body元素添加position:fixed,这样主页面就禁止滑动,同时很好地解决了弹窗穿透的问题。
    若弹窗为独立组件,可以采用如下代码:

    beforeMount() {
        // 获取原来的scrollTop 并将body的top修改为对应的值
        this.prevBodyStyle_scrollTop = document.body.scrollTop || document.documentElement.scrollTop
        this.prevBodyStyle_top = window.getComputedStyle(document.body, null).getPropertyValue('top')
        document.body.style.top = `-${this.prevBodyStyle_scrollTop}px`
        // 获取原来body的position 为了解决iOS上光标漂移的问题 将position修改为fixed
        this.prevBodyStyle_position = window.getComputedStyle(document.body, null).getPropertyValue('position')
        document.body.style.position = 'fixed'
        // 为了避免width空值的情况
        this.prevBodyStyle_width = window.getComputedStyle(document.body, null).getPropertyValue('width')
        document.body.style.width = '100%'
      },
    
      beforeDestroy() {
        document.body.style.top = this.prevBodyStyle_top || '0px'
        document.body.style.position = this.prevBodyStyle_position
        document.body.style.width = this.prevBodyStyle_width || '100%'
        document.body.scrollTop = document.documentElement.scrollTop = this.prevBodyStyle_scrollTop || 0
      },
    

    备注: 如果弹窗为一个独立的组件, 那么需要使用v-if来控制弹窗是否显示,不可使用v-show(因为使用v-show,会在主页面刚生成的同时生成该组件,导致position=fixed生效,在弹窗关闭的情况下页面也禁止滑动)

    移动端如何实现

    1.在弹窗的最外层div上添加@touchmove.stop.prevent (适合弹窗内容不需要滚动的情况下)

    <div @touchmove.stop.prevent>
     你要显示的内容
    </div>
    

    存在问题: 虽然可以阻止滑动,但是双击的时候主页面还是会跳动

    2.同PC端第三种方法
    3.通过addEventListener解决

    mounted() {
            document.body.addEventListener('touchmove', this.p, {passive: false})  
        },
    beforeDestroy () {
          document.body.removeEventListener('touchmove', this.p)
        },
    methods: {
        p (e) {
             e.preventDefault()
              e.stopPropagation()
          } 
    }
    

    划重点:addEventListener的第三个参数 {passive: false}

    先说说错误的代码,网上千篇一律的都是怎么成功的,纳闷了,反正我没有成功,在手机端和chrome浏览器等依然可以正常滚屏:

    document.body.addEventListener("touchstart",function(e){
                        e.stopPropagation();
                        e.preventDefault();
                    },false);
    
    

    错误代码为什么不行呢,而为什么使用{passive: false}就生效了呢?
    摘自MDN的解释:

    passive: Boolean,表示 listener 永远不会调用preventDefault()。如果 listener 仍然调用了这个函数,客户端将会忽略它并抛出一个控制台警告。

    MDN对于上述错误现象解释地很清楚:

    根据规范,passive 选项的默认值始终为false。但是,这引入了处理某些触摸事件(以及其他)的事件监听器在尝试处理滚动时阻止浏览器的主线程的可能性,从而导致滚动处理期间性能可能大大降低。
    为防止出现此问题,某些浏览器(特别是Chrome和Firefox)已将touchstart和touchmove事件的passive选项的默认值更改为true文档级节点 Window,Document和Document.body。这可以防止调用事件监听器,因此在用户滚动时无法阻止页面呈现。
    var elem = document.getElementById('elem'); 
    elem.addEventListener('touchmove', function listener() { /* do something */ }, { passive: true });
    
    添加passive:true参数后,touchmove事件不会阻塞页面的滚动(同样适用于鼠标的滚轮事件)。

    所以,我们可以通过将passive的值显式设置为false来覆盖此行为。

    另外:您无需担心基本scroll 事件的passive值。由于无法取消,因此事件监听器无法阻止页面呈现。(也是在PC端监听scroll无效的原因)

    参考链接

    前两种方法:https://blog.csdn.net/Chelle1...
    第三种:https://blog.csdn.net/yuhk231...
    vue prevent方法: https://www.cnblogs.com/Eden-...
    mdn关于addEventListener: https://developer.mozilla.org...

    原文地址:https://segmentfault.com/a/1190000017217663
  • 相关阅读:
    谈谈我对雾霾的看法
    2016年书单分享
    我的面试心得:面试官视角
    Cesium原理篇:GroundPrimitive
    Cesium原理篇:Batch
    Peter Hessler和他的中国三部曲(上)
    Cesium原理篇:Material
    全球PM25实时可视化
    Cesium原理篇:Property
    次郎的寿司梦
  • 原文地址:https://www.cnblogs.com/qixidi/p/10051574.html
Copyright © 2011-2022 走看看