Bootstrap 简明教程
Bootstrap - Scrollspy
本章将讨论 Bootstrap 的 scrollspy。当您滚动页面时，Bootstrap 的 scrollspy 功能会自动定向到导航栏内容。
How it work
当 href 引用的带有 id 的元素滚动到视图中时，scrollspy 会与 nav 、 list group 一起使用，并与当前页面中的任何锚元素一起使用。以下是如何执行此操作的。
-
为了使用 scrollspy，您应该有两件事，例如导航、列表组或一组简单的链接，以及一个可滚动容器，例如 <body> 或具有特定 height 和 overflow-y: scroll 的自定义元素。
-
向 scrollspy 容器添加属性 data-bs-spy="scroll" 和 data-bs-target="#navId" ，其中 "navId" 引用对应导航的唯一 id 。如果容器没有任何可聚焦元素，请包含 tabindex="0" 以确保键盘可访问性。
-
当您在“被监视的”容器中滚动时，导航中的锚点链接将被添加或删除 .active 类。如果无法解析链接的 id 目标，它们将被忽略。例如， <a href="#home">home</a> 应具有对应的 <div id="home"></div> 。
-
在 non-visible 元素部分，仅会考虑和定向可见元素。
Navbar
向下滚动 navbar 区域以查看活动类更改。打开下拉菜单并查看高亮显示的项目。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Scrollspy</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav id="navbarFirstExample" class="navbar bg-body-tertiary px-3 mb-3">
<a class="navbar-brand" href="#">Tutorialspoints</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#scrollspyFirstTitle">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspySecondTitle">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyThirdTitle">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyFourthTitle">Contact us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyFifthTitle">Features</a>
</li>
</ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbarFirstExample" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-body-tertiary p-3 rounded-2" tabindex="0">
<h4 id="scrollspyFirstTitle">Home</h4>
<p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group.</p>
<h4 id="scrollspySecondTitle">Services</h4>
<p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p>
<h4 id="scrollspyThirdTitle">About us</h4>
<p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group.</p>
<h4 id="scrollspyFourthTitle">Contact us</h4>
<p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p>
<h4 id="scrollspyFifthTitle">Features</h4>
<p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p>
</div>
</body>
</html>Nested nav
Scrollspy 支持嵌套的 .navs ，并在其 .active 时使其父级 .active 。滚动 navbar 时查看活动类变化。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Scrollspy</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="row mt-2">
<div class="col-4">
<nav id="nestatedNavbar" class="h-100 flex-column align-items-stretch pe-4 border-end">
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#home">Home</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#login">Log in</a>
<a class="nav-link ms-3 my-1" href="#logout">Log out</a>
</nav>
<a class="nav-link" href="#aboutus">About us</a>
<a class="nav-link" href="#contactus">Contact Us</a>
</nav>
</nav>
</div>
<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#nestatedNavbar" data-bs-smooth-scroll="true" class="bg-body-tertiary p-3 rounded-2 my-2" tabindex="0">
<div id="home">
<h4>Home</h4>
<p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p>
</div>
<div id="login">
<h5>Log In</h5>
<p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group</p>
</div>
<div id="logout">
<h5>Log out</h5>
<p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p>
</div>
<div id="aboutus">
<h4>About us</h4>
<p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group</p>
</div>
<div id="contactus">
<h4>Contact us</h4>
<p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p>
</div>
</div>
</div>
</div>
</body>
</html>List group
Scrollspy 支持*list-group*。当您在列表组附近滚动时，查看活动类变化。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Scrollspy</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="row mt-2">
<div class="col-4">
<div id="navbarList" class="list-group my-2">
<a class="list-group-item list-group-item-action" href="#home">Home</a>
<a class="list-group-item list-group-item-action" href="#services">Services</a>
<a class="list-group-item list-group-item-action" href="#aboutus">About us</a>
<a class="list-group-item list-group-item-action" href="#contactus">Contact us</a>
<a class="list-group-item list-group-item-action" href="#features">Features</a>
</div>
</div>
<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#navbarList" data-bs-smooth-scroll="true" class="bg-body-tertiary p-3 rounded-2 my-2" tabindex="0">
<h4 id="home">Home</h4>
<p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area.</p>
<h4 id="services">Services</h4>
<p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p>
<h4 id="aboutus">About us</h4>
<p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area.</p>
<h4 id="contactus">Contact us</h4>
<p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p>
<h4 id="features">Features</h4>
<p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. </p>
</div>
</div>
</div>
</div>
</body>
</html>Simple anchors
Scrollspy 适用于所有 <a> 锚元素，而不仅仅是 nav 元素和列表组。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Scrollspy</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-4">
<div id="listUsingAnchor" class="text-center">
<nav class="nav nav-pills flex-column mx-3">
<a class="nav-link active" href="#home">Home</a>
<a class="nav-link" href="#services">Services</a>
<a class="nav-link" href="#aboutus">About us</a>
<a class="nav-link" href="#contactus">Contact us</a>
<a class="nav-link" href="#features">Features</a>
</nav>
</div>
</div>
<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#listUsingAnchor" data-bs-offset="0" data-bs-smooth-scroll="true" class="bg-body-tertiary p-3 rounded-2 my-2" tabindex="0">
<h4 id="home">Home</h4>
<p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group.</p>
<h4 id="services">Services</h4>
<p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p>
<h4 id="aboutus">About us</h4>
<p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p>
<h4 id="contactus">Contact us</h4>
<p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group.</p>
<h4 id="features">Features</h4>
<p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group.</p>
</div>
</div>
</div>
</body>
</html>Non-visible elements
不可见的元素将被忽略，并且不会将其对应的导航项分配给 .active 类。在非可见包装器内初始化的 Scrollspy 实例会忽略所有目标元素。如果包装器变为可见，请使用 refresh 方法。这有助于检查可观察元素。
Example
document.querySelectorAll('#nav-tab>[data-bs-toggle="tab"]').forEach(el => {
el.addEventListener('shown.bs.tab', () => {
const target = el.getAttribute('data-bs-target')
const scrollElem = document.querySelector(`${target} [data-bs-spy="scroll"]`)
bootstrap.ScrollSpy.getOrCreateInstance(scrollElem).refresh()
})
})Usage
Via data attributes
将 data-bs-spy="scroll" 添加到要监视的元素（通常为 <body> ）中，以快速向顶部导航栏添加滚动监视行为。然后，使用 "data-bs-target" 属性指定任何 Bootstrap .nav 组件的父元素的 id 或类名。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Scrollspy</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body data-bs-spy="scroll" data-bs-target="#navbarDataAttribute">
<div id="navbarDataAttribute" class="my-2">
<ul class="nav nav-pills" role="pillslist">
<li class="nav-item">
<a class="nav-link" href="#scrollspyFirstTitle">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspySecondTitle">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyThirdTitle">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyFourthTitle">Contact us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyFifthTitle">Features</a>
</li>
</ul>
<div data-bs-spy="scroll" data-bs-target="#navbarDataAttribute" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="bg-body-tertiary p-3 rounded-2 my-2" tabindex="0">
<h4 id="scrollspyFirstTitle">Home</h4>
<p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group.</p>
<h4 id="scrollspySecondTitle">Services</h4>
<p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p>
<h4 id="scrollspyThirdTitle">About us</h4>
<p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p>
<h4 id="scrollspyFourthTitle">Contact us</h4>
<p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group.</p>
<h4 id="scrollspyFifthTitle">Features</h4>
<p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p>
</div>
</div>
</body>
</html>Via JavaScript
-
要在顶部导航栏上启用滚动监视行为，请将 data-bs-spy="scroll" 添加到所需的元素（通常为 <body> 标记）。
-
在 <script> 标记内部，使用标识符或类（如“navbarJavaScript”）将滚动监视应用于组件。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Scrollspy</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body data-bs-spy="scroll" data-bs-target="#navbarJavaScript">
<div id="navbarJavaScript">
<ul class="nav nav-pills" role="pillslist">
<li class="nav-item">
<a class="nav-link" href="#scrollspyFirstTitle">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspySecondTitle">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyThirdTitle">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyFourthTitle">Contact us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyFifthTitle">Features</a>
</li>
</ul>
<div data-bs-spy="scroll" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-body-tertiary p-3 rounded-2" tabindex="0">
<h4 id="scrollspyFirstTitle">Home</h4>
<p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p>
<h4 id="scrollspySecondTitle">Services</h4>
<p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p>
<h4 id="scrollspyThirdTitle">About us</h4>
<p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p>
<h4 id="scrollspyFourthTitle">Contact us</h4>
<p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group.</p>
<h4 id="scrollspyFifthTitle">Features</h4>
<p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p>
</div>
</div>
<script>
const scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbarJavaScript'
})
</script>
</body>
</html>Otpions
-
如 data-bs-animation={value} 中所示，要向 data-bs- 添加选项名称，请使用数据属性或 JavaScript。如果使用数据属性，请为选项名使用 "kebab-case" ，而不是 "camelCase" 。例如，使用 data-bs-custom-class="beautifier" ，而不是 data-bs-custom-class="beautifier" 。
-
Bootstrap 5.2.0 添加了一个新功能，称为 data-bs-config 属性，用于将基本组件配置存储为 JSON 字符串。如果元素同时含有 data-bs-config 和单独的数据属性，则单独的数据属性的值优先于 data-bs-config 中的值。此外，现有数据属性也可以存储 JSON 值。
-
Data-bs-config 、 data-bs- 和 js 对象组合起来创建最终的配置对象，其中最新键值覆盖所有其他键值。