Bootstrap JS 滚动

JS 滚动

Scrollspy 用于根据滚动位置自动更新导航列表中的链接。

有关 Scrollspy 的教程，请阅读我们的Bootstrap Scrollspy 教程。

通过 data-* 属性

添加data-spy="scroll"到应该用作可滚动区域的元素（通常是<body>元素）。

然后添加data-target属性的值为导航栏的 id 或类名 (.navbar）。这是为了确保导航栏与可滚动区域连接。

请注意，可滚动元素必须与导航栏列表项内的链接 ID 匹配（<div id="section1">火柴<a href="#section1">）。

可选的data-offset属性指定计算滚动位置时从顶部偏移的像素数。当您觉得导航栏中的链接在跳转到可滚动元素时太快或太早改变活动状态时，这非常有用。默认值为 10 像素。

需要相对定位：data-spy="scroll" 的元素需要 CSS位置属性，值为 "relative" 才能正常工作。

示例

<body data-spy="scroll" data-target=".navbar" data-offset="50">


<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#section1">Section 1</a>
    </li>
....
</ul>
</nav>


<div id="section1">
  <h1>Section 1</h1>
  <p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...

</body>

亲自试一试 »

通过JavaScript

手动启用：

示例

$('body').scrollspy({target: ".navbar"})

亲自试一试 »

滚动选项

选项可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称附加到 data-，如 data-offset=""。

Name	Type	Default	Description	尝试一下
offset	number	10	Specifies the number of pixels to offset from top when calculating the position of scroll	尝试一下

滚动方法

下表列出了所有可用的滚动监视方法。

Method	Description
.scrollspy("refresh")	When adding and removing elements from the scrollspy, this method can be used to refresh the document
.scrollspy("dispose")	Destroys the scrollspy

滚动活动

下表列出了所有可用的滚动监视事件。

Event	Description
activate.bs.scrollspy	Occurs when a new item becomes activated by the scrollspy