H5移动端滚动穿透

2020-05-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不行

上一篇下一篇

猜你喜欢

热点阅读