卷轴间谍
根据滚动位置自动更新 Bootstrap 导航或列表组组件,以指示当前在视口中哪个链接处于活动状态。
这个怎么运作
Scrollspy 有一些要求才能正常运行:
- 它必须用于 Bootstrap导航组件或列表组。
- Scrollspy 需要
position: relative;
您正在监视的元素,通常是<body>
. - Anchors(
<a>
) 是必需的,并且必须指向带有它的元素id
。
成功实施后,您的导航或列表组将相应更新,根据.active
相关目标将类从一项移动到下一项。
可滚动容器和键盘访问
如果您正在制作一个可滚动的容器(除了<body>
),请确保有一个height
set 并overflow-y: scroll;
应用于它 - 与 atabindex="0"
一起确保键盘访问。
导航栏中的示例
滚动导航栏下方的区域并观察活动类的变化。下拉项目也将突出显示。
第一个标题
这是 scrollspy 页面的一些占位符内容。请注意,当您向下滚动页面时,相应的导航链接会突出显示。它在整个组件示例中重复出现。我们在这里不断添加更多示例副本以强调滚动和突出显示。
第二个标题
这是 scrollspy 页面的一些占位符内容。请注意,当您向下滚动页面时,相应的导航链接会突出显示。它在整个组件示例中重复出现。我们在这里不断添加更多示例副本以强调滚动和突出显示。
第三个标题
这是 scrollspy 页面的一些占位符内容。请注意,当您向下滚动页面时,相应的导航链接会突出显示。它在整个组件示例中重复出现。我们在这里不断添加更多示例副本以强调滚动和突出显示。
第四标题
这是 scrollspy 页面的一些占位符内容。请注意,当您向下滚动页面时,相应的导航链接会突出显示。它在整个组件示例中重复出现。我们在这里不断添加更多示例副本以强调滚动和突出显示。
第五标题
这是 scrollspy 页面的一些占位符内容。请注意,当您向下滚动页面时,相应的导航链接会突出显示。它在整个组件示例中重复出现。我们在这里不断添加更多示例副本以强调滚动和突出显示。
<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="#scrollspyHeading1">First</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading2">Second</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">
<li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
<li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
</ul>
</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">First heading</h4>
<p>...</p>
<h4 id="scrollspyHeading2">Second heading</h4>
<p>...</p>
<h4 id="scrollspyHeading3">Third heading</h4>
<p>...</p>
<h4 id="scrollspyHeading4">Fourth heading</h4>
<p>...</p>
<h4 id="scrollspyHeading5">Fifth heading</h4>
<p>...</p>
</div>
嵌套导航示例
Scrollspy 也适用于嵌套.nav
的 s。如果一个嵌套.nav
是.active
,它的父母也将是.active
。滚动导航栏旁边的区域并观察活动类的变化。
项目 1
这是 scrollspy 页面的一些占位符内容。请注意,当您向下滚动页面时,相应的导航链接会突出显示。它在整个组件示例中重复出现。我们在这里不断添加更多示例副本以强调滚动和突出显示。
项目 1-1
这是 scrollspy 页面的一些占位符内容。请注意,当您向下滚动页面时,相应的导航链接会突出显示。它在整个组件示例中重复出现。我们在这里不断添加更多示例副本以强调滚动和突出显示。
项目 1-2
这是 scrollspy 页面的一些占位符内容。请注意,当您向下滚动页面时,相应的导航链接会突出显示。它在整个组件示例中重复出现。我们在这里不断添加更多示例副本以强调滚动和突出显示。
第 2 项
这是 scrollspy 页面的一些占位符内容。请注意,当您向下滚动页面时,相应的导航链接会突出显示。它在整个组件示例中重复出现。我们在这里不断添加更多示例副本以强调滚动和突出显示。
第 3 项
这是 scrollspy 页面的一些占位符内容。请注意,当您向下滚动页面时,相应的导航链接会突出显示。它在整个组件示例中重复出现。我们在这里不断添加更多示例副本以强调滚动和突出显示。
项目 3-1
这是 scrollspy 页面的一些占位符内容。请注意,当您向下滚动页面时,相应的导航链接会突出显示。它在整个组件示例中重复出现。我们在这里不断添加更多示例副本以强调滚动和突出显示。
项目 3-2
这是 scrollspy 页面的一些占位符内容。请注意,当您向下滚动页面时,相应的导航链接会突出显示。它在整个组件示例中重复出现。我们在这里不断添加更多示例副本以强调滚动和突出显示。
<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
<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>
列表组示例
Scrollspy 也适用于.list-group
s。滚动列表组旁边的区域并观察活动班级的变化。
项目 1
这是 scrollspy 页面的一些占位符内容。请注意,当您向下滚动页面时,相应的导航链接会突出显示。它在整个组件示例中重复出现。我们在这里不断添加更多示例副本以强调滚动和突出显示。
第 2 项
这是 scrollspy 页面的一些占位符内容。请注意,当您向下滚动页面时,相应的导航链接会突出显示。它在整个组件示例中重复出现。我们在这里不断添加更多示例副本以强调滚动和突出显示。
第 3 项
这是 scrollspy 页面的一些占位符内容。请注意,当您向下滚动页面时,相应的导航链接会突出显示。它在整个组件示例中重复出现。我们在这里不断添加更多示例副本以强调滚动和突出显示。
第 4 项
这是 scrollspy 页面的一些占位符内容。请注意,当您向下滚动页面时,相应的导航链接会突出显示。它在整个组件示例中重复出现。我们在这里不断添加更多示例副本以强调滚动和突出显示。
<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>
用法
通过数据属性
要轻松地将 scrollspy 行为添加到您的顶栏导航,请添加data-bs-spy="scroll"
到您要监视的元素(通常是<body>
)。然后添加带有任何 Bootstrap组件data-bs-target
的父元素的 ID 或类的属性。.nav
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>
通过 JavaScript
添加position: relative;
CSS 后,通过 JavaScript 调用 scrollspy:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
需要可解析的 ID 目标
导航栏链接必须具有可解析的 id 目标。例如,a<a href="#home">home</a>
必须对应 DOM 中的某些内容,例如<div id="home"></div>
.
不可见的目标元素被忽略
不可见的目标元素将被忽略,其相应的导航项将永远不会突出显示。
方法
刷新
当使用 scrollspy 和从 DOM 中添加或删除元素时,你需要像这样调用 refresh 方法:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
处置
销毁元素的滚动间谍。(删除 DOM 元素上存储的数据)
获取实例
允许您获取与 DOM 元素关联的 scrollspy 实例的静态方法
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
获取或创建实例
静态方法,允许您获取与 DOM 元素关联的 scrollspy 实例,或创建一个新实例以防它未初始化
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
选项
选项可以通过数据属性或 JavaScript 传递。对于数据属性,将选项名称附加到 中data-bs-
,如data-bs-offset=""
.
姓名 | 类型 | 默认 | 描述 |
---|---|---|---|
offset |
数字 | 10 |
计算滚动位置时从顶部偏移的像素。 |
method |
细绳 | auto |
查找被监视的元素在哪个部分。auto 将选择获取滚动坐标的最佳方法。offset 将使用该Element.getBoundingClientRect() 方法获取滚动坐标。position 将使用HTMLElement.offsetTop andHTMLElement.offsetLeft 属性来获取滚动坐标。 |
target |
字符串 | jQuery 对象 | DOM 元素 | 指定要应用 Scrollspy 插件的元素。 |
活动
事件类型 | 描述 |
---|---|
activate.bs.scrollspy |
每当滚动间谍激活新项目时,此事件就会在滚动元素上触发。 |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})