美文网首页老司机日常
vue 浮层底下禁止滚动

vue 浮层底下禁止滚动

作者: 拾壹丶ban | 来源:发表于2019-10-13 11:08 被阅读0次

首先遇到的问题是,弹出类似dialog的浮层。
我实现dialog的方法很简单,一个宽高是屏幕宽高的div,然后position:fixed。
如果不想让下面的布局滚动,就在div加上@touchmove.prevent

 <div @touchmove.prevent></div>

但是,但是,但是,当我们的浮层里面有可以滚动的布局的时候,这个滚到底部,就会触发下面的滚动。
一顿百度之后,有个前端大神提供了个方法,试了一下很靠谱,就是在在浮层弹出来的时候,把body定住。

 stopBodyScroll(isFixed) {
    let bodyEl = document.bodylet;
    if (isFixed) {
      this.scrollY = window.scrollY
      document.body.style = `position:fixed;top:-${this.scrollY}px;height: 100%;width:100%;overflow: hidden;`
    } else {
      document.body.style = ''
      window.scrollTo(0, this.scrollY)
    }
  },

学到了。

欢迎打赏

欢迎打赏

相关文章

网友评论

    本文标题:vue 浮层底下禁止滚动

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