Bootstrap教程

Bootstrap滚动监控

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

一、工作原理

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

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

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

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

二、导航栏

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

Bootstrap滚动监控

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
<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-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#one">one</a></li>
<li><a class="dropdown-item" href="#two">two</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#three">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变化。

Bootstrap滚动监控

<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 ms-3 my-1" href="#item-1-1">Item 1-1</a>
<a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
</nav>
<a class="nav-link" href="#item-2">Item 2</a>
<a class="nav-link" href="#item-3">Item 3</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
<a class="nav-link ms-3 my-1" href="#item-3-2">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变化。

Bootstrap滚动监控

<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">Item 2</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-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...
})

广告合作
QQ群号:707632017

温馨提示:

1、本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。邮箱:2942802716#qq.com。(#改为@)

2、本站原创内容未经允许不得转裁,转载请注明出处“站长百科”和原文地址。

目录