JS 表格或者列表 联动滚动 如何解决延迟?

• Z时代
• 2024-03-02
• 分类：IT

vue 例子如下

<template>
  <div class="page-bg">
    <div class="content" style="display:flex;position:relative;">
      <div
        class="left"
        style="flex:1;height:100vh;overflow:auto;position:fixed;left:0;top:0;width:40px;"
        @touchstart="forwardMouseenter('left')"
        ref="left"
      >
        <div
          class="left-item"
          v-for="(item, index) in 10000"
          :key="index"
          style="border:1px solid #333;background:red;color:#fff;height:30px;line-height:30px;text-align:center;"
        >
          {{ item }}
        </div>
      </div>
      <div
        class="right"
        style="flex:1;height:100vh;overflow:auto;padding-left:40px;"
        @touchstart="forwardMouseenter('right')"
        ref="right"
      >
        <div
          class="right-item"
          v-for="(item, index) in 10000"
          :key="index"
          style="border:1px solid #333;background:green;color:#fff;height:30px;line-height:30px;text-align:center;"
        >
          {{ item }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    leftScroll(e) {
      if (this.mouseType == "left") {
        this.$refs.right.scrollTop = e.target.scrollTop;
      }
    },
    rightScroll(e) {
      if (this.mouseType == "right") {
        this.$refs.left.scrollTop = e.target.scrollTop;
      }
    },
    forwardMouseenter(type) {
      this.mouseType = type;
      let { leftScroll, rightScroll } = this;
      let left = this.$refs.left;
      let right = this.$refs.right;
      left.removeEventListener("scroll", leftScroll);
      right.removeEventListener("scroll", rightScroll);
      if (type == "left") {
        left.addEventListener("scroll", leftScroll, false);
      } else if (type == "right") {
        right.addEventListener("scroll", rightScroll, false);
      }
    }
  }
};
</script>

当数据量非常大的时候 联动滚动会慢一点
就是 比如滚动right列表 left列表的联动会延迟一下才滚动到指定位置 这种情况如何解决让其丝滑的联动滚动?

以上是 JS 表格或者列表 联动滚动 如何解决延迟? 的全部内容， 来源链接： utcz.com/p/932915.html