关于移动端开发中遇到的坑-vue

滚动穿透问题

滚动穿透是指在移动端当有 fixed 遮罩背景和弹出层时,在屏幕上滑动能够滑动背景下面的内容。网上整理了解决方案,但有些还是存在一定的问题:

https://gitlwz.github.io/2018/05/02/vue-move/

设置overflow为hidden

1
2
3
4
5
6
.modal-open {
    &, body {
        overflow: hidden;
        height: 100%
    }
}

即当弹出层弹出时在html上添加.modal-open,禁用 html 和 body 的滚动条,但实际用上就会发现:

  1. 由于 html 和 body的滚动条都被禁用,弹出层后页面的滚动位置会丢失,需要用 js 来计算原来滚动的位置,在弹出时保持滚动位置;
  2. 杯具(>﹏<)的是页面的背景还是能够有滚的动的效果

js 之 touchmove + preventDefault

1
2
3
modal.addEventListener('touchmove', function(e) {
  e.preventDefault();
}, false);

即通过阻止移动端touchmove事件,但实际用上会发现弹出层需要滚动时也会被阻止(>﹏<)

最后解决方案:position: fixed

1
2
3
4
body.modal-open {
    position: fixed;
    width: 100%;
}

这种方式同样当弹出层弹出时滚动条会丢失,所以还需要使用js来保存滚动条的位置,在关闭弹出层时将滚动位置还原;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var ModalHelper = (function(bodyCls) {
  var scrollTop; // 在闭包中定义一个用来保存滚动位置的变量
  return {
    afterOpen: function() { //弹出之后记录保存滚动位置,并且给body添加.modal-open
      scrollTop = document.scrollingElement.scrollTop;
      document.body.classList.add(bodyCls);
      document.body.style.top = -scrollTop + 'px';
    },
    beforeClose: function() { //关闭时将.modal-open移除并还原之前保存滚动位置
      document.body.classList.remove(bodyCls);
      document.scrollingElement.scrollTop = scrollTop;
    }
  };
})('modal-open');

本人亲测确实比较完美解决了移动端滚动问题

没有更多推荐了,返回首页