ScrollSpy

ScrollSpy uses IntersectionObserver to monitor content section visibility and highlights the corresponding navigation item. Clicking a nav item smoothly scrolls to the target section.

---

Basic Usage

Scroll the content area on the right and observe the active navigation item change on the left.

<script setup>
const sections = Array.from({ length: 6 }, (_, i) => ({
  id: `section-${i + 1}`,
  title: `Section ${i + 1}`,
}))
const activeId = ref('section-1')
</script>

<TScrollSpy :items="sections" v-model:active-id="activeId" :offset-top="20">
  <div v-for="item in sections" :key="item.id" :id="item.id" style="min-height: 300px">
    <h4>{{ item.title }}</h4>
    <p>Content...</p>
  </div>
</TScrollSpy>

---

API

Props

Prop	Type	Default	Description
items	NavItem[]	[]	Navigation data source, { id: string, title: string }
active-id / v-model:active-id	string	''	Currently active menu item id
offset-top	number	0	Scroll offset for fixed headers

Emits

Event	Parameters	Description
update:active-id	id: string	v-model update event
click-item	id: string	Navigation item click event

Slots

Slot	Description
default	Content area to watch for scroll