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[]	—

提示

demo 的 .anchor-scroller / .anchor-sec 只是範例樣式（捲動容器需自帶 overflow-y: auto），庫本身不提供。