美文网首页
H5移动端滚动穿透

H5移动端滚动穿透

作者: 我是_你的范儿 | 来源:发表于2020-05-14 16:14 被阅读0次

    加 fixed

    弹出层show的时候给bodyfixed
    弹出层hide的时候把bodyfixed去掉

    加指令

    {
        directives: {
          fixed: {
            inserted () { //被绑定元素插入父节点时调用
              let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
              document.body.style.cssText += 'position: fixed; width: 100%; top: -' + scrollTop + 'px;'
            },
            unbind () { //指令与元素解绑时调用
              let body = document.body
              let top = body.style.top
              body.style.top = ''
              body.style.position = ''
              document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top)
              
            }
          }
        }
    }
    
    • 使用方法
    <div  v-if="isShow" v-fixed>
        ....
    </div>
    

    须使用v-if来隐藏和展示弹窗,因为依赖于dom的插入和注销,使用v-show不行

    相关文章

      网友评论

          本文标题:H5移动端滚动穿透

          本文链接:https://www.haomeiwen.com/subject/gpntohtx.html