识别哪个滚动条是活动的

Question

我的页面上有多个滚动条，但无法使它们正常工作：

 <div class="dates-container" v-for="id in ids">
    <overlay-scrollbars
      :ref="`datesHeader`+id"
      :options="datesScrollOptions"
      :key="id"
    >
 </div>
  ......
  resetScroller() {
    this.$nextTick(() => {
      if (this.$refs[`datesHeader${this.currentRoom}`][0]) {
        const inst = this.$refs[`datesHeader${this.currentRoom}`][0].osInstance();
        if (inst == null) return;
        const state = inst.getState();
        if (state.hasOverflow.x) {
          inst.scroll({ x: 0 });
        }
        this.updateScrollButtons();
      }
    });
  },

这样很好；问题是当我试图识别哪个滚动条被移动了，以及当滚动条被移动时我如何更新this.currentRoom；

Answer 1

坚定的你有错:参考值-应该是:ref="`datesHeader-${id}`"

然后，在onMounted上，您可以向$refs添加事件列表

onMounted() {
 this.$refs['datesHeader-0'].addEventLister('scroll', watchFunc)
}

博士：https://developer.mozilla.org/pl/docs/Web/API/EventTarget/addEventListener

记住在onBeforeUnmount中删除事件侦听器

此外，IntersectionObserver可以很好地跟踪滚动。

博士：https://developer.mozilla.org/enUS/docs/Web/API/Intersection_Observer_API