Javascript Vuetify选项卡在滚动时变为活动状态

我已经用它实现了vuetify标签，当你点击一个标签时，它会滚动到一个位置

       <v-tabs
          centered
          grow
          color="#009EE2"
        >
          <div class="slider-background" />
          <v-tabs-slider />

          <v-tooltip
            bottom
            v-for="(tab, key) in tabs"
            :key="key"
            color="#009EE2"
          >
            <template v-slot:activator="{on}">
              <v-tab
                v-on="on"
                v-scroll-to="{
                  el: tab.scrollTo,
                  container: scrollContainer,
                  duration: 300,
                  easing: 'linear',
                  offset: -120,
                  force: true,
                  cancelable:true
                }"
              >
                <v-icon v-text="tab.icon" />
              </v-tab>
            </template>
            <div class="v-tooltip-arrow" />
            <span>
              {{ $t(tab.tooltipText) }}
            </span>
          </v-tooltip>
        </v-tabs>

{{$t（tab.tooltipText）}

所以我现在想要实现的是，当滚动活动选项卡时，它会根据位置而变化

我找了好几天，什么也没找到

有没有不使用JQuery的方法

JQuery的结果示例：

---

通过组合选项卡的

href

属性和，您可以实现这一点

这是一支简陋但实用的钢笔：

实际上，我们在这里所做的是为每个标记分配一个锚，并将其绑定到数据属性。然后，使用Vuetify的

v-intersect

wrapper，在页面底部有一个带有交叉点观察者的跨度：

查看此范围时，

页面将自动滚动至选项卡3

此intersect包装器调用用户定义的方法（在本例中为

handleIntersect

）来更新选项卡：

handleIntersect（条目、观察者）{
if（条目[0]。isIntersecting）{
this.tab=“tab-3”
}
否则{
this.tab=“tab-1”
}
}

对于您的用例，可能每个根据其视口位置更改选项卡的项都需要调用给定的函数，并带有要设置哪个选项卡的参数。这与这支笔目前的位置相差不大

---

注意：我从未使用过IntersectionObserver，我不确定

isIntersecting

是否是在视口中检测元素存在的最佳方法，因此在生产代码中实现此功能之前，请进行您自己的研究和测试：）

您可以使用IntersectionObserver API（）或

onScroll

事件（）