iOSスクロールのラバーバンド効果を処理する

はじめに: 最近、H5 固定ヘッダーの 1 列目にテーブルを実装するときにバグが発生しました。スクロールテーブルのスクロールバーがテーブルの上部と左にあるときは、まだスライドできます（下にスライドし続けて右にスライドします）と、空白が表示されますが、手を離すとリバウンドしますが、これはこの問題は Apple 携帯電話でのみ発生し、Android 携帯電話では発生しないようです。これがiosのラバーバンド効果であることがついにわかりました。

1. 輪ゴム効果について

ラバーバンド効果とは、iOS端末でスクロールが発生した際、最後までスライドさせると一定距離ドラッグし続けることができますが、手を離すとすぐに元に戻ってしまう効果です。

2. 解決策

1. アイデア

モバイル端末のタッチイベントを監視し、タッチムーブでは上端または左端までスクロールしたかを判定し、スクロールイベントがあればスクロールイベントを無効にし、デフォルトのタッチイベントを防止します。

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 })
    }
  },