处理ios滚动的橡皮筋效果

前言：最近在实现H5固定表头首列的表格的时候，出现一个bug。当滚动表格的滚动条处于表格最上端和表格最左端的时候，仍然可以滑动（继续下滑和右滑），进而会出现一个空白，但是松手之后会回弹回去，但是这个问题只在苹果手机中出现，安卓手机不会。最后发现，这就是ios的橡皮筋效果。

一、关于橡皮筋效果

橡皮筋效果就是ios手机上出现滚动时，滑动到头时还可以继续拖拽出一段距离的空白，但松开手又立刻回弹回去的效果。

二、解决方案

1、思路

监听移动端的touch事件，在touchmove是判断，是否已经滚动到最上端或者最左端，如果是就禁用滚动事件，即阻止touch的默认事件

2、代码如下

 async mounted () {
   //判断是否是ios设备
    if (/(iPhone|iPad|iPod)/i.test(navigator.userAgent)) {
      console.log('是iOS设备')
      //tableBody 为滚动区域的id选择器
      const tableBody = document.getElementById('tableBody')
      // 判断所需参数定义
      let startPos, endPos, isScrolling, scrollTime
      tableBody.addEventListener('touchstart', function (e) {
        var touch = e.targetTouches[0] // touches数组对象获得屏幕上所有的touch，取第一个touch
    
        startPos = { x: touch.pageX, y: touch.pageY, time: +new Date() } // 取第一个touch的坐标值
      }, { passive: false })
      // 触摸移动
      tableBody.addEventListener('touchmove', function (e) {
        var touch = e.targetTouches[0]
        endPos = { x: touch.pageX - startPos.x, y: touch.pageY - startPos.y }
        isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1 : 0 // isScrolling为1时，表示纵向滑动，0为横向滑动
        if (isScrolling == 0) { // 横向
          // 判断左滑还是右滑,在左端就禁止左滑
          if (endPos.x > 0 && tableBody.scrollLeft == 0 && endPos.x < startPos.x) { // 左滑
            console.log('左滑')
            e.preventDefault()
          }
        }
        if (isScrolling == 1) { // 纵向
          // console.log('hh_endPos.y', endPos.y) // 上滑<0,下滑》0
          if (tableBody.scrollTop == 0 && endPos.y > 0) {
            e.preventDefault()
          } 
        }
      }, { passive: false })
    }
  },