解决 IOS 13+ H5 滑动边界橡皮筋弹性效果

问题

最近遇到一个问题，在我的 H5 项目中需要用到表格。我先后尝试了 element-ui、easytable、vxe-table 等各种表格，但是他们在锁头、锁列及锁底的情况下，依旧会出现边界橡皮筋效果。会显得很奇怪，所以想要关掉。

尝试

我做了不少尝试，从 css 到 JavaScript 再到 IOS 端的配置，都无法关闭这个橡皮筋效果。见链接。

最终解决方案

最后突然灵光一闪，既然我关不掉，那我自己完全控制滑动好了。于是有了下面的代码：

    // 修改 vxe-table 中的滑动容器行为
    bindTouchEvents () {
      const element = document.getElementsByClassName(
        'vxe-table--body-wrapper'
      )[0]
      if (element) {
        element.addEventListener(
          'touchstart',
          event => {
            event.preventDefault()
            this.touchX = event.changedTouches[0].clientX
            this.touchY = event.changedTouches[0].clientY
          },
          true
        )
        element.addEventListener(
          'touchmove',
          event => {
            event.preventDefault()

            // 计算手指偏移量
            const offsetX = event.changedTouches[0].clientX - this.touchX
            const offsetY = event.changedTouches[0].clientY - this.touchY

            element.scrollLeft = element.scrollLeft - offsetX
            element.scrollTop = element.scrollTop - offsetY

            this.touchX = event.changedTouches[0].clientX
            this.touchY = event.changedTouches[0].clientY
          },
          true
        )
        element.addEventListener(
          'touchend',
          event => {
            event.preventDefault()

            this.touchX = event.changedTouches[0].clientX
            this.touchY = event.changedTouches[0].clientY
          },
          true
        )
      } else {
        console.warn('未获取到表格元素')
      }
    },

这样做的好处在于，我自己完全控制了拖拽滑动行为。坏处在于丢失了原生滑动的惯性滑动，看着没那么丝滑了。不过这点也可以后续通过 JavaScript 来优化。

最后

最后看起来，解决方案其实很简单，只是自己不想手写。去不断尝试现有组件。反而浪费了很多时间。也算个经验教训吧。

惯性效果

@wave浪儿 在初始化的时候绑定 touch 事件

    bindTouchEvents() {
      const elements = document.getElementsByClassName(
        'vxe-table--body-wrapper'
      )
      if (elements && elements.length === 2) {
        const element = elements[0]
        element.addEventListener(
          'touchstart',
          (event) => {
            event.preventDefault()

            // 关闭 popover
            const popovers = this.$refs.popover
            if (popovers && popovers.length) {
              popovers.forEach((item) => {
                item.doClose()
              })
            }
            // 表格拖动
            this.touchX = event.changedTouches[0].clientX
            this.touchY = event.changedTouches[0].clientY
            // 表格惯性初始点
            this.positions = []
            this.positions.push({
              x: event.changedTouches[0].clientX,
              y: event.changedTouches[0].clientY,
              time: new Date().valueOf(),
            })
          },
          true
        )
        element.addEventListener(
          'touchmove',
          throttle((event) => {
            event.preventDefault()
            // 表格拖动
            const offsetX = event.changedTouches[0].clientX - this.touchX
            const offsetY = event.changedTouches[0].clientY - this.touchY
            element.scrollLeft = element.scrollLeft - offsetX
            element.scrollTop = element.scrollTop - offsetY
            this.touchX = event.changedTouches[0].clientX
            this.touchY = event.changedTouches[0].clientY
            const toTop = element.scrollTop < 5
            if (this.toTop !== toTop) {
              this.toTop = toTop
              this.$emit('toTop', toTop)
            }
            // 表格惯性 - 拖拽路径记录
            this.positions.push({
              x: event.changedTouches[0].clientX,
              y: event.changedTouches[0].clientY,
              time: new Date().valueOf(),
            })
            if (this.positions.length > 40) {
              this.positions.shift()
            }
          }, 30),
          true
        )
        element.addEventListener(
          'touchend',
          (event) => {
            event.preventDefault()

            this.touchX = event.changedTouches[0].clientX
            this.touchY = event.changedTouches[0].clientY

            // 惯性计算
            this.positions.push({
              x: event.changedTouches[0].clientX,
              y: event.changedTouches[0].clientY,
              time: new Date().valueOf(),
            })
            const endPosition = this.positions[this.positions.length - 1]
            let startPosition
            for (let i = this.positions.length - 1; i >= 0; i--) {
              if (endPosition.time - this.positions[i].time > 1000 || i === 0) {
                startPosition = this.positions[i]
                break
              }
            }
            const timeDiff = (endPosition.time - startPosition.time) / 1000
            this.speedX = (endPosition.x - startPosition.x) / timeDiff
            this.speedY = (endPosition.y - startPosition.y) / timeDiff
            clearInterval(this.timerId)
            const computeScroll = () => {
              const resistance = 0.5 // 惯性衰减速度
              this.speedX *= resistance
              this.speedY *= resistance

              element.scrollLeft = element.scrollLeft - this.speedX
              element.scrollTop = element.scrollTop - this.speedY
              if (Math.abs(this.speedX) < 1) this.speedX = 0
              if (Math.abs(this.speedY) < 1) this.speedY = 0
              if (this.speedX === 0 && this.speedY === 0) {
                clearInterval(this.timerId)
              }
            }
            computeScroll()
            this.timerId = setInterval(computeScroll, 30)
          },
          true
        )

        const fixedElement = elements[1]
        fixedElement.addEventListener(
          'touchstart',
          () => {
            // 关闭 popover
            const popovers = this.$refs.popover
            if (popovers && popovers.length) {
              popovers.forEach((item) => {
                item.doClose()
              })
            }
          },
          true
        )
      }
    },