Bootstrap5 滚动

滚动

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

如何创建滚动

以下示例展示了如何创建滚动：

示例

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


<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
<ul class="navbar-nav">
    <li><a href="#section1">Section 1</a></li>
    ...
</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>

亲自试一试 »

示例解释

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

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

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

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

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