如何获取活动元素/当前查看部分的标题并显示它

Question

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

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

这就是我所拥有的：

 <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 在视图中，我想要一个显示：“项目 2 标题”的文本，一旦我滚动到项目 3，这个 div 就会更新为“项目 2 标题”。我怎样才能做到这一点？谢谢您的帮助！

Answer 1

scrollspy文档中记录的事件侦听器为您提供id当前活动元素的。您可以使用它来显示您想要的任何内容。我在这里举了一个基本的例子：https ://codesandbox.io/s/competent-cherry-o4o6h?file=/src/App.vue它是基本的，因为它查询$el以查找活动元素并获取它的 innerHTML。相反，在真正的应用程序中，您可以直接引用导航中的对象，该对象首先用于呈现导航（因此避免查询 DOM）。getSectionTitle为了创建这个例子，我只使用了文档中的代码，我添加了一个计算属性（（就像 scrollspy 不再选择任何元素一样）。所以我添加了一个scrollListener, in&nbsp;mounted, remove in&nbsp;beforeDestroy，当#nav-scorller滚动到顶部时，它会重置section为''.除此之外，这是非常基本的。同样，这个额外的监听器并不是真正需要的。我只是认为展示它是如何完成的会很好，作为未来可能需要它的任何人的榜样。