解决弹出层滚动穿透的问题

一个棘手的问题:弹出层的滚动穿透,即弹出层滚动,那么被弹出层覆盖的下面的内容区域也会进行滚动。弹出层我是用的view标签然后使用的position:fixed进行的定位;说一下我的解决思路:

一:当弹出层里面无滚动的时候:

可以在遮罩的view标签上定义一个防止事件冒泡的方法:

1

2

3

4

5

6

catchtouchmove="preventD"

 preventD() {

    return

  }

    二:当弹出层有滚动的时候:

只需要在打开遮罩的时候给最外层的view标签加上一个nowarp的标签,关闭弹出层的时候吧class移除掉就可以了,

1

2

3

4

5

6

7

8

9

.noscroll {

  top: 0px;

  left: 0px;

  width: 100%;

  height: 100%;

  overflow: hidden;

  position: fixed;

  z-index: 0;

}

 H5然后还有一个键盘弹起不回弹,焦点错位的问题(注意原生)

<input type="text"  v-model="enough" @blur="clearSrcoll()">


//键盘顶起页面后隐藏不回弹解决方案
  clearSrcoll() {
    var currentPosition, timer;
    var speed = 1; //页面滚动距离
    timer = setInterval(function() {
      currentPosition =
        document.documentElement.scrollTop || document.body.scrollTop;
      currentPosition -= speed;
      window.scrollTo(0, currentPosition); //页面向上滚动
      currentPosition += speed; //speed变量
      window.scrollTo(0, currentPosition); //页面向下滚动
      clearInterval(timer);
    }, 1);
  },

猜你喜欢

转载自blog.csdn.net/qq_38188485/article/details/104639309