Scrollspy
A component for tracking scroll position and updating active links.
Source code
Click to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.
Installation
Usage
Component
Section 1
Section 2
Section 3
Section 4
Section 5
Multiple active links
Set mode="multiple" when you want every currently visible heading or section to receive
data-active="true" instead of only the single current section.
<UiScrollspy mode="multiple" :target="parentRef" :offset="80">
<NuxtLink
v-for="item in nav"
:key="item.id"
:data-scrollspy-anchor="item.id"
class="data-[active=true]:text-primary"
:to="`#${item.id}`"
>
{{ item.label }}
</NuxtLink>
</UiScrollspy>
The composable also exposes activeIds so you can react to the full visible set while still using
activeId as the canonical current section for history and change events.