Scrollspy active 无法与 bootstrap 5 一起使用答案

【问题标题】：Scrollspy active not working with bootsrap 5Scrollspy active 无法与 bootstrap 5 一起使用
【发布时间】：2021-08-18 14:10:08
【问题描述】：

我需要帮助。我使用了 Bootstrap 示例中的代码，但它不起作用。

我将数据目标放在 Javascript 上，我还将数据目标放在正文上。该代码是 bootstrap-5 scrollspy 的完整副本，但我不完全了解如何使用它。感谢您的帮助。

 $('body').scrollspy({ target: '#navbar-example2' });

<body data-target="#navbar-example2">
<nav id="navbar-example2" class="navbar navbar-light bg-light px-3 fixed-top">
      <a class="navbar-brand" href="#">Navbar</a>
      <ul class="nav nav-pills">
        <li class="nav-item">
          <a class="nav-link" href="#scrollspyHeading1">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#scrollspyHeading2">About Me</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#scrollspyHeading3">Skills</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#scrollspyHeading4">My Project</a>
        </li>
      </ul>
    </nav>
    
    <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
      <section id="scrollspyHeading1">
      </section>
      <section id="scrollspyHeading2">
      </section>
      <section id="scrollspyHeading3">
      </section>
      <section id="scrollspyHeading4">
      </section>
    </div>
</body>

【问题讨论】：

你在使用 jQuery 和 Bootstrap 5 吗？
不，我只是将 JS 用于数据目标
哦，不知道为什么 $('body').scrollspy({ target: '#navbar-example2' }); 会出现在问题中
我在搜索如何修复 scrollspy 时发现了该代码。实际上，它与 body html 上的 data-target 具有相同的功能。
你明白这是jQuery代码吗？ Bootstrap 5 不再需要 jQuery。这就是为什么我问你是否使用 jQuery，

标签： html bootstrap-5 scrollspy

【解决方案1】：

如Bootstrap 5 docs..中所述。

“可滚动容器和键盘访问如果你正在制作一个可滚动的容器（除了），一定要有一个高度设置和溢出-y：滚动；..."

例如，

.scrollspy-example {
    position: relative;
    height: 300px;
    overflow: auto;
}

Demo

【讨论】：

对不起，我不明白这一点。这是否意味着将溢出-y：滚动；在 CSS 主体上？
非常感谢，很有帮助。在您的帮助下，我正在尝试其他方法，这终于是我一直在寻找的东西。我将 data-bs-spy="scroll" 放在正文中，而不是创建一个 div。