滚动穿透问题探索

正文

 class="popup" v-if="showPopDialog" @click="closePopDialog" @touchmove="touchForbidden">




    

touchForbidden(e){
    e.preventDefault()
},

 class="content" v-if="showPopDialog" @touchmove="touchMove" id="canmove" @touchstart="touchStart">
      我是来进行测试的我是来进行测试的我是来进行测试的我是来进行测试的我是来进行测试的我是来进行测试的我是来进行测试的我是来进行测试的

我们在模态框上首先注册touchstart事件，得到用户首次触摸的y坐标值

touchStart(e){
     this.firstY = e.targetTouches[0].clientY;




    
}

然后，当用户在模态框滑动的时候，得到其滑动过程中的y坐标值，当滑动过程中触点的clientY > stratY的时候表明滑动方向向下，在用户往下滑的过程 中，滑动距离为0则表明为用户的滑动位置为模态框的最顶部，此时就得到了用户滑动到模态框顶部的边缘条件。

同样的道理，当clientY < startY时表明滑动方向为向上，scrollTop + offsetHeight >= scrollHeight则表明已经滑动到了模态框最底部。

touchMove(e){
    let target = document.getElementById('canmove')
    let offsetHeight = target.offsetHeight,
      scrollHeight = target.scrollHeight;
    let changedTouches = e.changedTouches;
    let scrollTop = target.scrollTop;
    if (changedTouches.length > 0) {
      let touch = changedTouches[0] || {};
      let moveY = touch.clientY;




    
      if (moveY > this.firstY && scrollTop === 0) {
        // 滑动到弹窗顶部临界条件
        e.preventDefault()
        return false
      } else if (moveY < this.firstY && scrollTop + offsetHeight >= scrollHeight) {
        // 滑动到底部临界条件
        e.preventDefault()
        return false
      }
    }
}

ok，接下来进行测试，再没有发现任何问题，完美解决，方案一Done。

在解决有关滑动问题的过程中，总会出现clientHeight、offsetHeight、scrollHeight、scrollTop等不是亲兄弟而胜似亲兄弟的一系列葫芦娃，有必 要来复习一波关于他们的基础知识。

• offsetHeight和元素的滚动没有任何关系，它只代表元素的高度，包括border、padding、水平滚动条但不包括margin

• clientHeight类似于offsetHeight，不同的是它只包括padding不包括border、水平滚动条以及margin

• scrollHeight只有当元素出现滚动时才有意义，元素不滚动时候，scrollHeight==clientHeight，当元素滚动时，scrollHeight的值为scrollTop+clientHeight

• scrollTop为元素滚动时隐藏的部分

• offsetTop依然和滚动没有关系，代表当前元素顶部距离最近父元素顶部的距离

在我们处理滚动过程中，基本都会使用到上述变量，图文结合的方式相信大家更容易理解清楚它们之间的关系。

解决方案二

接下来我们来研究方案二，在打开弹窗的时候，可以通过为底部内容区域增加动态class来阻止底部内容滑动，但是这样导致的问题是会丢失底部内容区域 的滚动距离，没事，不慌！在丢失滚动距离之前我们可以将它记录下来，关闭弹窗的时候再将之前记录的scrollTop设置回去不就ok了吗？理论可行，接下 来我们就正式开始coding...

当打开模态框的时候，需要为底部内容区域增加一个动态class来阻止滑动，如下：

.forbidden_scroll{
    position: fixed;
    height: 100%;
  }

打开模态框之前，我们需要记录当前的底部内容的scrollTop值，

touchmove(e){
    this.scrollTop = document.getElementById('scrollElement').scrollTop
}

当关闭弹窗的时候，首先移除掉刚才添加的动态class，再将scrollTop设置回去即可。

closePopDialog(){
    this.showPopDialog = false
    this.top = -this.scrollTop
    this.showStyle = false
},

整个模板部分代码如下：

 class="main">
    
 :class="showStyle ? 'forbidden_open' : 'article'" id="scrollElement" :style="{'margin-top': top + 'px'}" @touchmove="touchmove">
      
 class="block_red">
        
 class="block_click" @click="openPopDialog">Click Me