滚动监听介绍
滚动监听是Bootstrap中的一个功能，可以根据滚动位置自动更新导航组件的活动状态。
Bootstrap 5 滚动监听的特点：
- 自动跟踪滚动位置
- 高亮显示当前可见区域的导航项
- 支持多种导航组件（导航栏、列表组等）
- 提供平滑的滚动动画
- 可自定义偏移量和目标元素
滚动监听通常用于长页面导航、文档网站或任何需要根据滚动位置更新UI的场合。
基本用法
通过数据属性
最简单的方法是通过数据属性添加滚动监听。
必需的属性：
data-bs-spy="scroll"- 启用滚动监听data-bs-target- 指定导航容器的IDdata-bs-offset- 设置偏移量（可选）
<body data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="100">
<nav id="mainNav" class="navbar">
<ul class="navbar-nav">
<li><a href="#section1" class="nav-link">Section 1</a></li>
<li><a href="#section2" class="nav-link">Section 2</a></li>
</ul>
</nav>
<div id="section1">...</div>
<div id="section2">...</div>
</body>通过 JavaScript
滚动监听也可以通过 JavaScript 初始化。
// 初始化滚动监听
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#mainNav',
offset: 100
})
// 或者初始化特定元素的滚动监听
var element = document.getElementById('myScrollspy');
var scrollSpy = new bootstrap.ScrollSpy(element, {
target: '#list-example'
});
// 刷新滚动监听（当动态添加内容时）
scrollSpy.refresh();
// 获取滚动监听实例
var scrollSpy = bootstrap.ScrollSpy.getInstance(element);导航链接要求
要使滚动监听正常工作，导航链接必须指向页面中存在的具有相应ID的元素。
<!-- 导航链接 -->
<a href="#section1">Section 1</a>
<!-- 对应的内容部分 -->
<div id="section1">
<h2>Section 1</h2>
<p>这是第一部分的内容</p>
</div>配置选项
偏移量 (Offset)
偏移量用于计算滚动位置时从顶部扣除的距离。
这在有固定导航栏时特别有用，可以确保导航高亮在正确的位置触发。
<!-- 设置100px的偏移量 -->
<body data-bs-spy="scroll" data-bs-target="#navbar" data-bs-offset="100">// 通过JavaScript设置偏移量
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar',
offset: 100
});目标元素 (Target)
目标元素指定了滚动监听要监视的导航容器。
这可以是任何包含导航链接的元素，如导航栏、列表组或简单的导航菜单。
<!-- 目标是一个导航栏 -->
<body data-bs-spy="scroll" data-bs-target="#mainNavbar">
<!-- 目标是一个列表组 -->
<div data-bs-spy="scroll" data-bs-target="#listGroup">平滑滚动
Bootstrap 5 默认不包含平滑滚动功能，但您可以轻松添加。
/* 添加平滑滚动 */
html {
scroll-behavior: smooth;
}// 或者通过JavaScript添加平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});实际示例
导航栏示例
滚动监听最常用于导航栏，随着页面滚动自动高亮当前部分。
<nav id="navbar-example" class="navbar navbar-light bg-light px-3">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#item1">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#item2">Item 2</a>
</li>
</ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="0">
<h4 id="item1">Item 1</h4>
<p>...</p>
<h4 id="item2">Item 2</h4>
<p>...</p>
</div>嵌套导航示例
滚动监听也可以与嵌套导航一起使用。
<nav id="navbar-example2" class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#one">one</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#two">two</a></li>
<li><a class="dropdown-item" href="#three">three</a></li>
</ul>
</li>
</ul>
</nav>高级用法
动态内容
如果页面内容是通过JavaScript动态加载的，您需要手动刷新滚动监听。
// 获取滚动监听实例
var scrollSpy = bootstrap.ScrollSpy.getInstance(document.body);
// 刷新滚动监听
scrollSpy.refresh();
// 或者直接初始化新的滚动监听
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#mainNav'
});
scrollSpy.refresh();自定义滚动容器
滚动监听不仅可以应用于整个页面，还可以应用于任何可滚动容器。
<div class="row">
<div class="col-4">
<div id="custom-nav" class="list-group">
<a class="list-group-item list-group-item-action" href="#custom-item-1">Item 1</a>
<a class="list-group-item list-group-item-action" href="#custom-item-2">Item 2</a>
</div>
</div>
<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#custom-nav"
data-bs-offset="0" class="custom-scrollspy" style="height: 200px; overflow-y: auto;">
<h4 id="custom-item-1">Item 1</h4>
<p>...</p>
<h4 id="custom-item-2">Item 2</h4>
<p>...</p>
</div>
</div>
</div>事件处理
滚动监听提供事件，可以在激活新项目时执行自定义代码。
// 监听激活事件
document.addEventListener('activate.bs.scrollspy', function (e) {
console.log('激活的项目:', e.relatedTarget);
// 可以在这里添加自定义逻辑
// 例如：更新页面标题、发送分析事件等
});