Bootstrap滚动监控案例教程- 站长百科

Bootstrap滚动监控可以根据滚动位置自动更新Bootstrap 导航或列表组组件，以提供视觉上的指示。通过检测滚动位置并与每个链接的位置信息进行比较，可以确定哪个链接在视口中处于活动状态，并相应地更新样式。

一、工作原理

滚动监控正常运行的几个要求：

必须使用在Bootstrap导航元件nav或列表群组list group；
滚动监控需要在被监控的元素上设定position: relative；
锚（a）是必要的，且必须指向到该元素的id。

成功运行后，导航或列表群组将相应更新，根据相对应的目标将.active从一个项目移动到下一个项目。

可滚动内容与键盘兼容性：如果要制作可滚动容器（body除外），请确定已经设定height和overflow-y: scroll；旁边带有tabindex=“0”，以确保键盘兼容性。

二、导航栏

滚动导航下方的块，并查看active class的变化，下拉菜单项目也会显示同样效果。

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
<a class="navbar-brand" href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#fat" rel="external nofollow" >@fat</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mdo" rel="external nofollow" >@mdo</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#one" rel="external nofollow" >one</a></li>
<li><a class="dropdown-item" href="#two" rel="external nofollow" >two</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#three" rel="external nofollow" >three</a></li>
</ul>
</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>

三、嵌套导航

滚动监控也适用于嵌套的.nav。如果嵌套.nav是.active，它的父层也会是.active状态。滚动导航条旁的块，并观察它的active变化。

<nav id="navbar-example3" class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >Navbar</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1" rel="external nofollow" >Item 1</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-1-1" rel="external nofollow" >Item 1-1</a>
<a class="nav-link ms-3 my-1" href="#item-1-2" rel="external nofollow" >Item 1-2</a>
</nav>
<a class="nav-link" href="#item-2" rel="external nofollow" >Item 2</a>
<a class="nav-link" href="#item-3" rel="external nofollow" >Item 3</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-3-1" rel="external nofollow" >Item 3-1</a>
<a class="nav-link ms-3 my-1" href="#item-3-2" rel="external nofollow" >Item 3-2</a>
</nav>
</nav>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="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 1-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。滚动列表群组旁边的区域，并观察active class变化。

<div id="list-example" class="list-group">
<a class="list-group-item list-group-item-action" href="#list-item-1" rel="external nofollow" >Item 1</a>
<a class="list-group-item list-group-item-action" href="#list-item-2" rel="external nofollow" >Item 2</a>
<a class="list-group-item list-group-item-action" href="#list-item-3" rel="external nofollow" >Item 3</a>
<a class="list-group-item list-group-item-action" href="#list-item-4" rel="external nofollow" >Item 4</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">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>

五、用法

1、通过数据属性

要在导航条中加上滚动监控行为，只要将data-bs-spy=“scroll”加到要监控的元素（通常是body）。接着将data-bs-target属性加入任何Bootstrap .nav元件的父元素ID或class。

body {
position: relative;
}

<body data-bs-spy="scroll" data-bs-target="#navbar-example">
...
<div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>

2、通过JavaScript

在CSS加入position: relative；后，透过JavaScript调用滚动监控：

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

注意：

导航连接并需有可解析的ID目标。举例来说：<a href=”#home”>home</a>必须确实对应到DOM中的<div id=”home”></div>；
不可见的目标元素将被忽略，并和其对应的导航也不会有高亮显示效果。

六、方法

1、刷新

将滚动监控与新增或删除DOM元素一起使用时，需要像这样调用refresh方法：

var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})

2、注销

销毁元素上的滚动监控。（删除DOM元素上储存的数据）

3、获取

允许取得滚动监控和DOM元素之间关联实体的静态方法。

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

七、选项

选项可以透过data属性或是JavaScript传递。像是data属性，增加选项名称到data-bs-，例如：data-bs-offset=“”.

Name	Type	Default	Description
offset	number	10	计算滚动监控的和顶部的偏移量
method	string	auto	查找监控元素所在的部分，auto将选择最好的方法来获得滚动坐标。offset将使用Element.getBoundingClientRect（）方法来取得滚动坐标。position将会使用HTMLElement.offsetTop和HTMLElement.offsetLeft属性来取得滚动坐标。 Element.getBoundingClientRect() HTMLElement.offsetTop and HTMLElement.offsetLeft
target	string \| jQuery object \| DOM element		指定特定元素套用滚动监控套件。

八、事件

Event type	Description
activate.bs.scrollspy	每当一个新的元素启用滚动监控，这个事件会在监控元素上被触发。

var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})