Anchor 앵커

스크롤 연동 목차 내비게이션입니다. 클릭 시 대상 영역으로 이동하고, 스크롤 시 현재 섹션을 하이라이트합니다.

앵커

<template>
  <div class="demo-col" style="max-width: 640px">
    <div class="demo-row" style="align-items: flex-start; gap: 24px">
      <div ref="scroller" class="anchor-scroller">
        <div id="anchor-a" class="anchor-sec">
          <h3>산석</h3>
          <p>우점준으로 산석을 그리며, 기세가 웅장합니다.</p>
        </div>
        <div id="anchor-b" class="anchor-sec">
          <h3>림목</h3>
          <p>협엽과 점엽이 교차합니다.</p>
        </div>
        <div id="anchor-c" class="anchor-sec">
          <h3>수구</h3>
          <p>한 줄기 폭포가 운기에 걸려 있습니다.</p>
        </div>
        <div id="anchor-d" class="anchor-sec">
          <h3>제발</h3>
          <p>범관의 낙관이 숲 사이에 숨어 있습니다.</p>
        </div>
      </div>
      <LhAnchor :items="items" :target="scrollerEl" :offset="12" direction="vertical" smooth />
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    items: [
      { id: 'anchor-a', title: '산석' },
      { id: 'anchor-b', title: '림목' },
      { id: 'anchor-c', title: '수구' },
      { id: 'anchor-d', title: '제발' },
    ],
    scrollerEl: undefined,
  }),
}
</script>

Props

프로퍼티	설명	타입	기본값
items	앵커 데이터 (하위 계층 지원)	LhAnchorItem[]	—
target	스크롤 컨테이너 (선택자 또는 요소, 기본값 window)	string \| HTMLElement	—
offset	앵커 영역의 스크롤 컨테이너 상단 기준 상대 오프셋 (연동 판정에 사용)	number	—
direction	배치 방향	'vertical' \| 'horizontal'	'vertical'
smooth	부드러운 스크롤	boolean	false
sx	sx 레이아웃 단축 프로퍼티	—	—

AnchorItem Props

프로퍼티	설명	타입	기본값
id	대상 요소 id	string	—
title	표시 텍스트	string	—
children	하위 앵커	LhAnchorItem[]	—

팁

데모의 .anchor-scroller / .anchor-sec는 단순한 예시 스타일입니다 (스크롤 컨테이너 자체에 overflow-y: auto가 필요). 라이브러리 자체는 제공하지 않습니다.