Bootstrap 滚动监听
在本教程中，您将学习如何使用 Bootstrap 创建滚动监听。
使用 Bootstrap 创建滚动监听
Bootstrap 滚动监听是一种导航机制，它会根据滚动位置自动突出显示导航链接，以指示访问者当前在页面上的位置。 如果您使用书签链接将访问者引导到具有大量内容的页面的不同部分，则滚动监听将使您的网页更加优雅和易于访问。
这是一个典型的 Bootstrap 滚动监听示例。
<body data-spy="scroll" data-offset="15" data-target="#myScrollspy">
<div class="container">
<div class="row">
<div class="col-sm-3" id="myScrollspy">
<div class="list-group">
<a class="list-group-item list-group-item-action active" href="#section1">Section One</a>
<a class="list-group-item list-group-item-action" href="#section2">Section Two</a>
<a class="list-group-item list-group-item-action" href="#section3">Section Three</a>
</div>
</div>
<div class="col-sm-9">
<div id="section1">
<h2>Section One</h2>
<p>This is section one content...</p>
</div>
<hr>
<div id="section2">
<h2>Section Two</h2>
<p>This is section two content...</p>
</div>
<hr>
<div id="section3">
<h2>Section Three</h2>
<p>This is section three content...</p>
</div>
</div>
</div>
</div>
</body>注意： Bootstrap 滚动监听插件需要使用 Bootstrap 导航组件（例如导航栏、导航标签或胶囊）才能正确突出显示 活动链接。
通过数据属性创建 ScrollSpy
您可以通过数据属性轻松地将滚动监视行为添加到您的顶栏导航，而无需编写任何 JavaScript 代码。 让我们看看下面的例子：
<body data-spy="scroll" data-offset="60" data-target="#myNavbar">
<nav id="myNavbar" class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container">
<a href="#" class="navbar-brand">Navbar</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="nav-item">
<a href="#section1" class="nav-link">Section 1</a>
</li>
<li class="nav-item">
<a href="#section2" class="nav-link">Section 2</a>
</li>
<li class="nav-item">
<a href="#section3" class="nav-link">Section 3</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Section 4<b class="caret"></b></a>
<div class="dropdown-menu">
<a href="#section4dot1" class="dropdown-item">Section 4.1</a>
<a href="#section4dot2" class="dropdown-item">Section 4.2</a>
<a href="#section4dot3" class="dropdown-item">Section 4.3</a>
</div>
</li>
<li>
<a href="#section5" class="nav-link">Section 5</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div id="section1">
<h2>Section 1</h2>
<p>This is section 1 content...</p>
</div>
<hr>
<div id="section2">
<h2>Section 2</h2>
<p>This is section 2 content...</p>
</div>
<hr>
<div id="section3">
<h2>Section 3</h2>
<p>This is section 3 content...</p>
</div>
<hr>
<h2>Section 4</h2>
<p>This is section 4 content</p>
<div id="section4dot1">
<h3>Section 4.1</h3>
<p>This is section 4.1 content...</p>
</div>
<div id="section4dot2">
<h3>Section 4.2</h3>
<p>This is section 4.2 content...</p>
</div>
<div id="section4dot3">
<h3>Section 4.3</h3>
<p>This is section 4.3 content...</p>
</div>
<hr>
<div id="section5">
<h2>Section 5</h2>
<p>This is section 5 content...</p>
</div>
</div>
</body>你可能会想这段代码是关于什么的。 好的，让我们一一浏览这段scrollspy代码的每一部分，以便更好地理解。
代码说明
Bootstrap 滚动监听基本上有两个组件 — 目标导航（例如导航栏、导航选项卡或胶囊）和要监视的可滚动区域，通常是 <body> 部分。
data-spy="scroll"属性（line no-01）应用于被监视的可滚动元素，即<body> ;元素。data-target属性被添加到具有 Bootstrap.nav组件的父元素的 ID 或类的可滚动元素上，以便可以通过滚动间谍定位导航链接以进行突出显示。- 可选的
data-offset属性指定在计算滚动位置时从顶部偏移的像素数。 如果目标链接过早或过晚突出显示，请调整偏移值。 默认值为 10 像素。
其余的事情是不言自明的，例如 .navbar 元素指定 Bootstrap navbar，元素 <div id="section1"></div> (line no-33) 创建一个带有 id 的书签 属性，而元素 <a href="#section1">Section 1</a>（第 17 行）在同一页面内添加指向此书签的链接，依此类推。
通过 JavaScript 创建 ScrollSpy
您也可以使用 JavaScript 手动添加滚动监听— 只需在 JavaScript 代码中使用导航栏的id 或 class 选择器调用 scrollspy() Bootstrap 方法。
<script>
$(document).ready(function(){
$("body").scrollspy({
target: "#myNavbar",
offset: 70
})
});
</script>选项
有些选项可以传递给 scrollspy() Bootstrap 方法来自定义滚动监听的功能。
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| offset | number | 10 | 计算滚动位置时从顶部偏移的像素数。 |
| method | string | auto | 查找被监视的元素所在的部分。值 auto 将选择获取滚动坐标的最佳方法。 而 offset 值将使用 jQuery 偏移方法获取滚动坐标，而 position 值将使用 jQuery 位置方法获取滚动坐标。 |
| target | string | 指定要应用滚动监听插件的元素。 |
您还可以使用数据属性为滚动监听设置此选项 — 只需将选项名称附加到 data-，如 data-offset="0", data-method="position"，等等。
方法
这些是标准 bootstrap 的滚动监听方法：
.scrollspy('refresh')
当使用滚动监听并从 DOM 中添加或删除元素时，您需要像这样调用 refresh 方法：
<script>
$(document).ready(function(){
$('[data-spy="scroll"]').each(function(){
var $spy = $(this).scrollspy('refresh');
});
});
</script>活动
Bootstrap 的滚动监听类包含一些用于挂钩滚动监听功能的事件。
| 事件 | 说明 |
|---|---|
| activate.bs.scrollspy | 只要有新项目被滚动监听激活，就会触发此事件。 |
以下示例在滚动间谍突出显示新项目时向用户显示警告消息。
<script>
$(document).ready(function(){
$("#myNavbar").on("activate.bs.scrollspy", function(){
var currentItem = $(".nav li.active > a").text();
$("#info").empty().html("Currently you are viewing - " + currentItem);
})
});
</script>