在 Bootstrap 5 中，滚动监听（Scrollspy） 是一种自动更新导航菜单（或其他元素）状态的功能，它基于页面的滚动位置。当用户滚动页面时，Scrollspy 会根据当前的视图区域更新激活的导航项。

1. 启用滚动监听（Scrollspy）

首先，确保你的页面中有一个滚动区域（通常是页面的 <body> 或某个容器），并在该区域内使用一个具有锚点（ID）导航的列表。

示例：启用滚动监听

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Scrollspy Example</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">

  <style>
    body {
      position: relative;
    }

    .content-section {
      padding: 100px 0;
      height: 100vh;
    }
  </style>
</head>
<body data-bs-spy="scroll" data-bs-target="#navbar-example" tabindex="0">

  <!-- Navbar with Scrollspy -->
  <nav id="navbar-example" class="navbar navbar-light bg-light fixed-top">
    <a class="navbar-brand" href="#">Scrollspy</a>
    <ul class="nav nav-pills">
      <li class="nav-item">
        <a class="nav-link" href="#section1">Section 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section2">Section 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section3">Section 3</a>
      </li>
    </ul>
  </nav>

  <!-- Sections with content -->
  <div class="content-section" id="section1">
    <h1>Section 1</h1>
    <p>Content for Section 1</p>
  </div>

  <div class="content-section" id="section2">
    <h1>Section 2</h1>
    <p>Content for Section 2</p>
  </div>

  <div class="content-section" id="section3">
    <h1>Section 3</h1>
    <p>Content for Section 3</p>
  </div>

  <!-- Bootstrap JS and Popper.js -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js"></script>

</body>
</html>

2. 解释代码

  • data-bs-spy="scroll"：此属性启用滚动监听。
  • data-bs-target="#navbar-example"：此属性定义要监听滚动位置并更新状态的目标元素。在本例中，我们使用了一个带有导航项的 #navbar-example。
  • tabindex="0"：允许页面的 body 元素作为可滚动容器接收键盘事件。
  • .nav-link：导航项与页面中的 ID 锚点（如 #section1, #section2, #section3）相对应。每个链接都指向页面中对应的内容部分。

3. 样式和功能

当滚动页面时，Scrollspy 会根据当前视图区域更新 nav-link 元素的 active 类，从而改变其外观（例如，添加背景颜色或加粗字体）。这使得导航菜单能够实时反映用户所在的页面位置。

示例：自定义样式

.nav-link.active {
  background-color: #007bff;
  color: white;
}

这样，当用户滚动到某个区域时，导航项将变成蓝色（表示当前所在的部分）。

4. 自定义滚动区域

除了使用整个页面的滚动，Scrollspy 还支持在容器内的滚动。如果你希望在某个特定的容器内启用滚动监听，可以指定一个包含滚动条的元素作为滚动容器。

示例：在特定容器内启用 Scrollspy

<div id="scroll-container" style="height: 400px; overflow-y: scroll;" data-bs-spy="scroll" data-bs-target="#navbar-example" tabindex="0">
  <div class="content-section" id="section1">
    <h1>Section 1</h1>
    <p>Content for Section 1</p>
  </div>

  <div class="content-section" id="section2">
    <h1>Section 2</h1>
    <p>Content for Section 2</p>
  </div>

  <div class="content-section" id="section3">
    <h1>Section 3</h1>
    <p>Content for Section 3</p>
  </div>
</div>
  • #scroll-container：定义了一个固定高度并启用垂直滚动的容器。在该容器内部滚动时，Scrollspy 会监视内容的滚动，并更新导航菜单的状态。

5. Scrollspy 配置选项

  • offset：设置滚动监听的偏移量。例如，当滚动区域达到顶部或底部时，导航项激活的偏移位置。
<body data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="50">
  • smooth scrolling：为了平滑滚动效果，可以通过 JavaScript 添加平滑滚动。
<style>
  html {
    scroll-behavior: smooth;
  }
</style>

6. 禁用 Scrollspy

如果你不再需要 Scrollspy 功能，可以通过 JavaScript 禁用它。

var scrollspy = new bootstrap.ScrollSpy(document.body, {
  target: '#navbar-example'
});
scrollspy.dispose();  // 禁用 Scrollspy

总结

  • data-bs-spy="scroll"：启用滚动监听功能。
  • data-bs-target="#navbar-example"：设置目标元素，用于更新状态的元素（通常是导航菜单）。
  • scroll-behavior: smooth;：实现平滑滚动效果。
  • offset：用于设置滚动偏移量，控制激活的元素位置。
  • 通过 dispose() 禁用 Scrollspy：禁用滚动监听。

通过这些功能，Scrollspy 能够在用户滚动页面时自动高亮当前所在部分的导航链接，从而提升用户体验。