ScScrollSpy

ScScrollSpy 컴포넌트는 스크롤 위치에 따라 활성화된 섹션을 감지하고 change 이벤트를 발생시켜, 네비게이션 등으로 현재 섹션을 표시하거나 특정 섹션으로 스크롤 이동할 수 있게 도와줍니다.

---

✅ 기본 사용법

section1

section2

section3

section4

section5

섹션 1

섹션 2

섹션 3

섹션 4

섹션 5

결과 :

<!-- 디자인은 마음대로 가능  -->
<div class="section-nav">
  <div
    class="item"
    :class="{ active: sectionId === sectionName }"
    v-for="sectionName in sectionList"
    :key="sectionName"
    @click="$refs.scrollSpy.scrollToSection(sectionName)"
  >
    {{ sectionName }}
  </div>
</div>

<sc-scroll-spy ref="scrollSpy" height="500" class="text-white" @change="onChange">
  <sc-scroll-section id="section1">
    <div class="h-[400px] bg-slate-900">섹션 1</div>
  </sc-scroll-section>
  <sc-scroll-section id="section2">
    <div class="h-[600px] bg-slate-800">섹션 2</div>
  </sc-scroll-section>
  <sc-scroll-section id="section3">
    <div class="h-[700px] bg-slate-700">섹션 3</div>
  </sc-scroll-section>
  <sc-scroll-section id="section4">
    <div class="h-[300px] bg-slate-600">섹션 4</div>
  </sc-scroll-section>
  <sc-scroll-section id="section5">
    <div class="h-[1000px] bg-slate-500">섹션 5</div>
  </sc-scroll-section>
</sc-scroll-spy>

<div class="mt-5 text-sm">결과 : {{ sectionId }}</div>

<script setup>
import { ref } from 'vue';

const sectionId = ref('');
const sectionList = ref(['section1', 'section2', 'section3', 'section4', 'section5']);
const onChange = (id) => {
  sectionId.value = id;
};
</script>

---

🛠️ 속성 (Props)

이름	타입	기본값	설명
height	Number | String	500	스크롤 컨테이너 높이(px). 문자열 예: "50vh"도 가능

---

📤 이벤트 (Emits)

이벤트 이름	파라미터	설명
change	activeId	현재 뷰포트에 보이는 섹션의 id 를 반환

---

🔳 슬롯 (Slots)

이름	설명
default	내부에 <sc-scroll-section> 컴포넌트를 배치하며, 각 섹션의 id 로 활성화 여부를 계산합니다

---

🎨 스타일 클래스

클래스 이름	설명
.sc-scroll-spy-wrap	스크롤 가능한 래퍼 요소 (overflow-y: auto)
.sc-scroll-section	각 섹션 컨테이너. id 속성으로 구분

---