老司机日常

vue 浮层底下禁止滚动

2019-10-13  本文已影响0人  拾壹丶ban

首先遇到的问题是,弹出类似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)
    }
  },

学到了。

欢迎打赏

欢迎打赏
上一篇 下一篇

猜你喜欢

热点阅读