推特引导滚动间谍总是选择最后一个元素

Twitter Bootstrap scrollspy always selecting last element

本文关键字：选择 最后一个 元素 间谍 滚动      更新时间：2023-09-26

我有一个scrollspy问题，在这个fiddle中重新创建：http://jsfiddle.net/jNXvG/3/

如演示中所示，无论滚动位置如何，ScrollSpy插件始终保持最后一个菜单项处于选中状态。我读过其他问题和答案，也尝试过offset等的不同组合，但都没有帮助。我搞不清楚出了什么问题。

我不想编辑我的模板以包含丑陋的html"数据"标签，所以我通过JavaScript调用scrollspy()来激活插件。

下一步是删除固定的内容高度，并在侧边栏上使用"词缀"。

我遇到了完全相同的问题，对我来说，将height: 100%添加到body元素就是解决方案。

（显然，其他任何东西都无法使其工作）

您需要将ScrollSpy附加到将触发滚动事件的元素，而不是反映滚动位置的菜单：

$('#content').scrollspy();​

JSFiddle

仅供参考：为了获得我想要的效果（与Twitter Bootstrap文档页面上的效果相同），我需要将"body"设置为我的目标元素。。。我无法通过使用我想监视的元素的直接父元素作为目标来实现滚动。

（它总是自动选择我的最后一个元素）

height:100%;

在导致问题的身体上（因为我没有那样的东西）。

那是

position:absolute;

在集装箱分类上

希望它能帮助别人。。。

我用100%的身高修复了它，但它在Firefox上不起作用。在浪费了这么多时间之后，在github页面上找到了答案。将高度100%应用于HTML标记可以修复Chrome和Firefox的问题。

https://github.com/twbs/bootstrap/issues/5007

调用scrollspy方法时，通常指定body标记和nav元素。

<script>
        $(function() {
            $('body').scrollspy({ target: '#faq_sidebar' });
        });
</script>

上面的JavaScript相当于：

<body data-spy="scroll" data-target="#faq_sidebar">

唯一不指定body标记的情况是，如果您想像上面的JSFiddle中那样使用嵌套滚动条来跟踪元素。

如果上面的建议没有解决其他人的问题，请尝试在页面的第一行添加<!DOCTYPE html>。这是一个简单的步骤，解决了我的问题。

我也遇到了同样的问题；从<body>元素中删除height: 100%为我解决了这个问题

，$element=$（element）。is（'body'）$（窗口）：$（元素）

到此：

，$element=$（element）。is（'body'）$（窗口）：$（窗口）//$（元素）

（注意//后面的元素是一个注释，所以我不会忘记我更改了它）

这为我修复了它。

ScrollSpy是非常无情的，至少可以说文档很少。。。根据您的实现，对此有不同且冲突的修复方法。。。

嵌套内容是我的问题。这为我修复了它：

（1） 确保你的导航中的所有href都与你监视的目标容器中的相应ID相匹配。

（2） 如果监视内容容器中的项目是嵌套的，那么它将不起作用。。。

此：

<ul class="nav" id="sidebar">
  <li>
     <a href="#navItem1" />
  </li>
  <li>
     <a href="#navItem2" />
  </li>
</ul>
<div id="spiedContent"> <!-- nested content -->
   <div id="navItem1">
      <div id="navItem2"></div>
   </div>    
</div>

到此：

<ul class="nav" id="sidebar">
  <li>
     <a href="#navItem1" />
  </li>
  <li>
     <a href="#navItem2" />
  </li>
</ul>
<div id="spiedContent"> <!-- flat content -->
   <div id="navItem1"></div>    
   <div id="navItem2"></div>
</div>

一切都好！

我的猜测是，如果你看一下scrollspy代码，它并没有越过id的间谍容器的第一个子对象。

确保您没有混合实现。如果你的身体标签上有data-spy="scroll" data-target=".bs-docs-sidebar"，你就不需要$('#content).scrollspy()。

我认为这可能是ScrollSpy中的一个错误。

我也遇到了同样的问题，当我浏览代码时，我可以看到所有目标的偏移量都是相同的（-95px）。我检查了这些设置的位置，它使用了position（）函数。这将返回元素相对于父元素偏移量的位置。

我改为使用offset（）函数。此函数返回元素相对于页面偏移量的位置。一旦我这样做了，它就完美地工作了。不确定为什么这不是默认行为。

position（）函数在我的情况下不起作用的原因是，我必须有一个空的div，它实际上绝对位于容器顶部上方95px。我需要这个作为我的目标，这样标题就不会隐藏在我固定在页面顶部的标题后面。

当我试图解决这个问题时，我使用了Mehdi Benadada所说的一些内容，并在body中添加了position: relative;。我在样式表中添加了以下内容：

body {
  position: relative;
  height: 100%;
}

希望这对将来的某个人有所帮助。

您不必调用方法scrollspy（）。此外，你不需要设定高度：任何地方都可以达到100%。

你只需要：

  1. 位置：相对适用于身体
  2. 添加数据bs spy＝"；滚动"；到您的内容或身体
  3. 使用导航栏id添加数据bs目标

https://i.stack.imgur.com/U1xCl.png

这对我有帮助。

似乎只有当使用的容器有滚动条时，滚动间谍才能工作（使用bootstrap 5测试）。您可以将data-bs-spy="scroll"和data-bs-target="#target-nav"属性放在最近的具有滚动条的父级中。

在我的案例中，我添加了引导程序版本5.2.3的scrollspy组件，但我的引导程序js-cdn是5.0。在我添加了5.2.3 js cdn之后，它就工作了

您还可以添加下载的引导程序js文件

并且确保也添加引导css cdn

相关文章：