如何获取活动 element/currently 已查看部分的标题并显示它（Bootstrap Vue ScrollSpy）？

Question

我指的是 Bootstrap Vue Scrollspy(https://bootstrap-vue.org/docs/directives/scrollspy/#scrollspy)。我正在使用 Nuxt js。

我的元素被正确引用并且正在监视内容。我想在 div 中更新当前正在查看的 element/section。我知道在正在查看的 element/section 中添加了一个活动的 class，但我不确定如何获取它。

这是我的：

 <div id="mobilescrollspy">          <--- Scrollspy headings in a dropdown     
        <b-nav v-b-scrollspy>
          <b-nav-item-dropdown text="Dropdown">
            <b-dropdown-item class="text-base self-center" href="#item-1">
              Item 1 Heading
            </b-dropdown-item>
            <b-dropdown-item class="text-base self-center" href="#item-2">
              Item 2 Heading
            </b-dropdown-item>
            <b-dropdown-item class="text-base self-center" href="#item-3">
              Item 3 Heading
            </b-dropdown-item>
          </b-nav-item-dropdown>
        </b-nav>
</div>

<div class="content">                <--- The content itself
  <div id="item-1">
      This is the content for item 1
  </div>
  <div id="item-2">
      This is the content for item 2
  </div>
  <div id="item-3">
      This is the content for item 3
  </div>
</div>

如果项目 2 在视图中，我想要一个文本显示："Item 2 Heading"，一旦我滚动到项目 3，这个 div 就会更新为 "Item 2 Heading"。我怎样才能做到这一点？感谢您的帮助！

Answer 1

scrollspy's documentation 中记录的事件侦听器为您提供当前活动元素的 id。您可以使用它来显示任何您想要的内容。

我在这里举了一个基本的例子：https://codesandbox.io/s/competent-cherry-o4o6h?file=/src/App.vue

它很基本，因为它查询 $el 以找到活动元素并获取它的 innerHTML。相反，在真实的应用程序中，您可以直接引用导航中用于首先呈现导航的对象（因此避免查询 DOM）。

为了创建这个示例，我只使用了文档中的代码，我添加了一个计算的属性 (getSectionTitle)，以及一个可选功能：我注意到滚动到顶部时没有事件发出，我认为如果我清除所选部分会很好（就像 scrollspy 不再选择任何元素一样）。所以我在 mounted 中添加了一个 scrollListener，在 beforeDestroy 中删除了，当 #nav-scorller 滚动到顶部时，将 section 重置为 ''。
除此之外，这是非常基本的。

同样，这个额外的侦听器并不是必需的。我只是觉得展示它是如何做到的会很好，作为将来可能需要它的人的榜样。

如何获取活动 element/currently 已查看部分的标题并显示它（Bootstrap Vue ScrollSpy）？

How can I get the active element/currently viewed section's heading and display it (Bootstrap Vue ScrollSpy)?

javascript

scrollspy

vue.js

nuxt.js

bootstrap-vue