问题

最近遇到一个问题，在我的 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 来优化。

最后

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