Anchor 锚点

滚动监听当前章节并自动高亮，点击锚点平滑滚动定位。

基础用法

滚动监听

第一章

第一节内容：用于演示滚动监听与高亮跟随。

第二章

滚动到该区域时，左侧锚点自动高亮。

第三章

点击锚点可平滑滚动定位到对应章节。

示例代码

高亮判定偏移

高亮判定偏移（offset）

第一章

offset 控制顶部高亮判定区的偏移量。

第二章

滚动观察高亮切换点与默认值的差异。

示例代码

点击事件

点击事件

第一章

点击左侧锚点，查看事件输出。

第二章

事件 detail 携带目标 href。

尚未点击

示例代码

受控高亮

active 为受控属性：外部设置 / 移除 active 可直接控制当前高亮项（滚动监听仍会随滚动接管）。

受控 active

高亮第一章高亮第二章高亮第三章清除高亮

第一章

点击左侧按钮设置 active，锚点立即高亮对应项。

第二章

滚动该容器时，scroll spy 会接管高亮。

第三章

「清除高亮」移除 active，恢复无高亮状态。

示例代码

API

属性

属性	说明	类型	默认值
active	当前高亮 href	string	—
items	锚点项 JSON	AnchorItem[] | string	[]
offset	高亮判定偏移（px）	string	0

事件

事件	说明
oas-change	点击锚点，detail: { href }

基于 IntersectionObserver 的 scroll spy；点击平滑滚动定位；nav + aria-label="锚点导航"，当前项 aria-current="true"。