BS5 Scrollspy 滚动监听
学习使用 Scrollspy 组件自动更新导航栏以标记当前滚动位置。 · 难度：入门 · +15XP
Scrollspy 简介
Scrollspy 是 Bootstrap 5 中用于自动更新导航或列表组件的工具，根据滚动位置高亮显示当前可见的章节。常用于单页网站或文档页面。
核心属性
| 属性 | 说明 |
|---|---|
data-bs-spy='scroll' | 在滚动容器上启用 Scrollspy |
data-bs-target='#navId' | 指定要监听的导航元素 ID |
data-bs-offset | 滚动偏移量，调整高亮时机 |
代码示例
<nav id='navbar-example2' class='navbar navbar-light bg-light px-3'>
<ul class='nav nav-pills'>
<li class='nav-item'><a class='nav-link' href='#section1'>章节1</a></li>
<li class='nav-item'><a class='nav-link' href='#section2'>章节2</a></li>
</ul>
</nav>
<div data-bs-spy='scroll' data-bs-target='#navbar-example2' tabindex='0' style='height:300px;overflow-y:scroll;'>
<h4 id='section1'>章节1</h4>
<p>内容...</p>
<h4 id='section2'>章节2</h4>
<p>内容...</p>
</div>练习提示
在右侧代码中，为 div 添加 data-bs-spy='scroll' 和 data-bs-target='#navId'，并给导航链接设置正确的 href 锚点。调整 data-bs-offset 来改变激活时机。