在使用Twitter Bootstrap的滚动监听（scrollspy）时，有一些开发者遇到了它总是选择最后一个元素的问题。这个问题很常见，但也很容易解决。本文将详细介绍如何解决这个问题，并提供示例代码。
什么是Scrollspy？
滚动监听（scrollspy）是指当用户滚动页面时，导航栏会自动高亮显示对应的部分。Twitter Bootstrap是一个广泛使用的前端框架，其中的scrollspy插件可以让我们方便地实现此功能。
什么是问题？
在使用Bootstrap的scrollspy插件时，一些开发者经常遇到的问题是，它总是将活动类（active class）添加到最后一个元素上，而不是正确的元素上。这可能会导致导航栏中的选项卡无法正确地跟随用户的滚动。
解决方法
通常，这个问题的原因是由于你的HTML结构没有正确地配置，导致scrollspy不能正确地识别需要高亮的部分。为了解决这个问题，我们需要检查以下几点：
1. 确认目标元素具有正确的ID
首先，我们需要确保所有需要滚动监听的目标元素都有唯一的ID，如下所示：
<div id="section-1">Section 1</div> <div id="section-2">Section 2</div> <div id="section-3">Section 3</div>
2. 确认导航栏的链接使用正确的锚点
其次，我们需要确保导航栏的链接使用正确的锚点，如下所示：
<nav>
<ul class="nav">
<li><a href="#section-1">Section 1</a></li>
<li><a href="#section-2">Section 2</a></li>
<li><a href="#section-3">Section 3</a></li>
</ul>
</nav>3. 确认文档结构正确
最后，我们需要确保整个文档的结构正确。通常情况下，scrollspy插件需要将整个文档包裹在一个父元素中，如下所示：
-- -------------------- ---- -------
----- ----------------- ----------------------
---- ------------
---- ----- ---
------
---- ------------- ---- ------------ ---
---- ---------------------- -------
---- ---------------------- -------
---- ---------------------- -------
------
-------以上三个步骤都正确配置后，你的scrollspy应该就能够正常工作了！
示例代码
-- -------------------- ---- -------
----- ----------------- ----------------------
---- ------------
--- ------------
------ ------------------------- ----------
------ ------------------------- ----------
------ ------------------------- ----------
-----
------
---- -------------
---- ---------------------- -------
---- ---------------------- -------
---- ---------------------- -------
------
---- ----------- -------- ---
----- ---------------- -------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------
-------总结
如果你遇到了Twitter Bootstrap的scrollspy总是选择最后一个元素的
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29815