vue 如何处理两个滚动条同步滚动，导致抖动

当两个滚动条同步滚动时，可能会出现抖动的问题。原因是两个滚动条之间的滚动事件会相互触发，导致不必要的重复渲染。

为了解决这个问题，可以使用 debounce（防抖）来限制滚动事件的触发次数。通过设置一个时间间隔，在该时间间隔内只执行一次滚动事件，从而减少重复渲染的次数。

具体实现方法如下：

1. 在 data 中添加一个变量来保存当前滚动位置：

data() {
  return {
    scrollPosition: 0
  }
}

2. 在滚动事件中更新该变量：

methods: {
  handleScroll() {
    this.scrollPosition = event.target.scrollTop
  }
}

3. 使用 debounce 包装滚动事件：

import debounce from 'lodash/debounce'

methods: {
  handleScroll: debounce(function () {
    this.scrollPosition = event.target.scrollTop
  }, 100)
}

4. 在另一个滚动条的滚动事件中更新滚动位置：

methods: {
  handleScroll() {
    this.$refs.scrollbar.scrollTop = this.scrollPosition
  }
}

通过以上步骤，可以实现两个滚动条同步滚动，同时避免抖动问题。