Bootstrap - 滚动监听：初学者指南

你好，有抱负的网页开发者们！今天，我们将深入了解Bootstrap的一个令人兴奋的功能——滚动监听（Scrollspy）。如果你是编程新手，不用担心——我会一步步引导你了解这个话题，就像这些年来我对我学生的做法一样。那么，来杯咖啡，让我们开始吧！

Bootstrap - Scrollspy

什么是滚动监听？

在深入技术细节之前，我们先了解一下滚动监听是什么。想象你在网上阅读一篇长文章，当你滚动时，导航菜单会自动高亮显示你当前正在阅读的章节。这就是滚动监听的作用！它是一个小巧的功能，通过提供用户在内容中的当前位置的视觉反馈来增强用户体验。

工作原理

滚动监听通过监控网页的滚动位置并相应地更新导航项的激活状态来工作。就像是有一个小侦探（ hence the name!）在监视你在页面上的位置，并告诉你的导航菜单：“嘿，用户现在在这里！”

让我们来看一个基本示例：

<body data-bs-spy="scroll" data-bs-target="#navbar-example">
<div id="navbar-example">
<ul class="nav nav-tabs">
<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>
</div>

<div data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="0" tabindex="0">
<h4 id="section1">章节 1</h4>
<p>...</p>
<h4 id="section2">章节 2</h4>
<p>...</p>
</div>
</body>

在这个示例中，我们告诉Bootstrap监听滚动位置（data-bs-spy="scroll"）并更新#navbar-example中的导航。当你滚动内容时，相应的导航项将被高亮显示。

导航栏

滚动监听最常见的用法之一是与导航栏一起使用。让我们来看一个更详细的示例：

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
<a class="navbar-brand" href="#">导航栏</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading1">第一</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading2">第二</a>
</li>
</ul>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
<h4 id="scrollspyHeading1">第一个标题</h4>
<p>...</p>
<h4 id="scrollspyHeading2">第二个标题</h4>
<p>...</p>
</div>

在这个示例中，我们有一个带有两个链接的导航栏。当你滚动内容时，相应的导航栏项将被高亮显示。就像是给你的网页装上了GPS！

嵌套导航

有时，你可能想要有嵌套的导航项。滚动监听也可以处理这种情况！下面是如何操作的：

<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
<a class="navbar-brand" href="#">导航栏</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">项目 1</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-1-1">项目 1-1</a>
<a class="nav-link ms-3 my-1" href="#item-1-2">项目 1-2</a>
</nav>
<a class="nav-link" href="#item-2">项目 2</a>
</nav>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0">
<h4 id="item-1">项目 1</h4>
<p>...</p>
<h5 id="item-1-1">项目 1-1</h5>
<p>...</p>
<h5 id="item-1-2">项目 1-2</h5>
<p>...</p>
<h4 id="item-2">项目 2</h4>
<p>...</p>
</div>

这会创建一个嵌套的导航结构，当你在不同的章节和小节之间滚动时，它会更新。就像是书籍中的章节和子章节，但是是互动的！

列表组

滚动监听不仅限于导航栏。你还可以与列表组一起使用：

<div id="list-example" class="list-group">
<a class="list-group-item list-group-item-action" href="#list-item-1">项目 1</a>
<a class="list-group-item list-group-item-action" href="#list-item-2">项目 2</a>
</div>

<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
<h4 id="list-item-1">项目 1</h4>
<p>...</p>
<h4 id="list-item-2">项目 2</h4>
<p>...</p>
</div>

这会创建一个列表组，当你在内容中滚动时，它会更新。就像是有一个知道你确切位置的目录！

简单锚点

有时，你可能想要使用简单的锚点链接而不是完整的导航栏或列表组：

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
<a class="navbar-brand" href="#">导航栏</a>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#fat">@fat</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mdo">@mdo</a>
</li>
</ul>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" tabindex="0">
<h4 id="fat">@fat</h4>
<p>...</p>
<h4 id="mdo">@mdo</h4>
<p>...</p>
</div>

这会创建简单的锚点链接，当你在滚动时会更新。就像是网页上的书签，当你到达它们时会亮起！

非可见元素

滚动监听甚至可以与最初不可见的元素一起工作：

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
<a class="navbar-brand" href="#">导航栏</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#fat">@fat</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mdo">@mdo</a>
</li>
</ul>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" tabindex="0">
<h4 id="fat">@fat</h4>
<p>...</p>
<h4 id="mdo">@mdo</h4>
<p>...</p>
<h4 id="one">one</h4>
<p>...</p>
<h4 id="two">two</h4>
<p>...</p>
<h4 id="three">three</h4>
<p>...</p>
</div>

<script>
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example2'
})
</script>

在这个示例中，即使一些元素最初不可见，当它们进入视图时，滚动监听仍然可以与它们一起工作。就像是有一个可以看到墙壁的侦探！

使用

要使用滚动监听，你需要做三件事：

将data-bs-spy="scroll"添加到你想要监听的元素上（通常是<body>）。
将data-bs-target="#navId"添加到指定用于滚动监听的导航上。
添加data-bs-offset=""来指定在计算滚动位置时从顶部偏移的像素数。

下面是你可以使用的数据属性表格：

属性	描述
data-bs-spy	激活滚动监听
data-bs-target	指定用于滚动监听的导航
data-bs-offset	在计算滚动位置时从顶部偏移的像素数
data-bs-method	找出被监听的元素所在的章节

选项

你也可以用JavaScript初始化滚动监听：

var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})

下面是你可以使用的选项表格：

选项	类型	默认值	描述
offset	number	10	在计算滚动位置时从顶部偏移的像素数
method	string	'auto'	找出被监听的元素所在的章节
target	string	''	指定用于滚动监听的导航

CSS属性

滚动监听使用了一些CSS属性来施展魔法：

.scrollspy-example {
position: relative;
height: 200px;
margin-top: .5rem;
overflow: auto;
}

position: relative 和 overflow: auto 属性对于滚动监听正确工作至关重要。

就这样！你现在已经装备了使用Bootstrap的滚动监听功能的知识。记住，熟能生巧，所以不要害怕尝试这些示例。祝你编程愉快，愿你的滚动总是顺畅！

Credits: Image by storyset