Bootstrap 4参考手册
组件·滚动监听 | Scrollspy
滚动监听 | Scrollspy
根据滚动位置自动更新引导导航或列表组组件，以指示当前视图端口中哪个链接处于活动状态。
它是如何工作的
滚动间谍有几个要求才能正常工作：
- 如果从源头构建我们的JS，要求
util.js...
- 它必须用在一个引导带上NAV组分或列表组...
- 卷轴间谍需要
position: relative;在你监视的元素上，通常<body>...
- 当监视其他元素时
<body>，一定要有一个height设置和overflow-y: scroll;申请。
- 锚定物%28
<a>%29是必需的，必须指向具有id...
成功实现后，您的导航或列表组将相应更新，移动.active根据它们关联的目标从一个项初始化到另一个项。
肚脐中的例子
滚动导航栏下面的区域，并观察活动类的变化。下拉式项目也将突出显示。
打开getbootstrap.com上的示例
<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="#fat">@fat</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mdo">@mdo</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#one">one</a>
<a class="dropdown-item" href="#two">two</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#three">three</a>
</div>
</li>
</ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="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>嵌套NAV示例
涡旋间谍也适用于嵌套的.nav如果嵌套.nav是.active，它的父母也会.active滚动导航栏旁边的区域，并观察活动类的变化。
打开getbootstrap.com上的示例
<nav id="navbar-example3" class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">Item 1</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
<a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
</nav>
<a class="nav-link" href="#item-2">Item2</a>
<a class="nav-link" href="#item-3">Item3</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
<a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
</nav>
</nav>
</nav>
<div data-spy="scroll" data-target="#navbar-example3" data-offset="0">
<h4 id="item-1">Item 1</h4>
<p>...</p>
<h5 id="item-1-1">Item 1-1</h5>
<p>...</p>
<h5 id="item-1-2">Item 2-2</h5>
<p>...</p>
<h4 id="item-2">Item 2</h4>
<p>...</p>
<h4 id="item-3">Item 3</h4>
<p>...</p>
<h5 id="item-3-1">Item 3-1</h5>
<p>...</p>
<h5 id="item-3-2">Item 3-2</h5>
<p>...</p>
</div>使用列表组的示例
斯克鲁尔间谍也与.list-group滚动列表组旁边的区域，并观察活动类的更改。
打开getbootstrap.com上的示例
<div id="list-example" class="list-group">
<a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Item2</a>
<a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
<a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
<h4 id="list-item-1">Item 1</h4>
<p>...</p>
<h4 id="list-item-2">Item 2</h4>
<p>...</p>
<h4 id="list-item-3">Item 3</h4>
<p>...</p>
<h4 id="list-item-4">Item 4</h4>
<p>...</p>
</div>使用
通过数据属性
若要轻松地将滚动间谍行为添加到顶部导航中，请添加data-spy="scroll"对于要监视%28的元素，最典型的情况是<body>29%。然后添加data-target属性，该属性具有任何Bootstrap的父元素的ID或类。.nav组件。
body {
position: relative;
}<body data-spy="scroll" data-target="#navbar-example">
...
<div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>通过JavaScript
加后position: relative;在CSS中，通过JavaScript调用滚动间谍：
$('body').scrollspy({ target: '#navbar-example' })所需可解析ID目标
Navbar链接必须有可分辨的id目标。例如，<a href="#home">home</a>必须对应于DOM中的某些内容，如<div id="home"></div>...
非-:visible忽略目标元素
不是的目标元素:visible根据jQuery将被忽略，其相应的导航项将永远不会突出显示。
方法
.scrollspy('refresh')
当结合使用滚动间谍从DOM中添加或删除元素时，您需要调用以下刷新方法：
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
}).scrollspy('dispose')
破坏元素的滚动间谍。
备选方案
选项可以通过数据属性或JavaScript传递。对于数据属性，将选项名追加到data-，如data-offset=""...
Name |
Type |
Default |
Description |
|---|---|---|---|
offset |
number |
10 |
Pixels to offset from top when calculating position of scroll. |
事件
Event Type |
Description |
|---|---|
activate.bs.scrollspy |
This event fires on the scroll element whenever a new item becomes activated by the scrollspy. |
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
// do something…
}) © 2011–2017 Twitter, Inc.©2011-2017自带作者
根据麻省理工学院的许可授权的代码。
根据CreativeCommonsAttributionLicense v3.0授权的文档。
https：//getbootstrap.com/docs/4.0/Components/scroll间谍/
组件·滚动监听 | Scrollspy相关
Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。
| 主页 | https://getbootstrap.com/ |
| 源码 | https://github.com/twbs/bootstrap |
| 版本 | 4 |
| 发布版本 | 4.0.0-beta.2 |
加载中,请稍侯......