我的Twitter Bootstrap的ScrollSpy试图窥探不应该被窥探的元素吗？

Question

我正在使用BackboneJS和Bootstrap,我试图在访问者点击按钮后对某些内容启用滚动间谍.

因此,当用户点击该按钮时,会执行以下操作:

$('#frontPageNav').css('display', 'block'); // It was hidden on load
$('#frontPageNav').scrollspy(); // Activate scrollspy, this is where the error happens
$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh'); // I think this is not needed because nothing was invisible before
});
$('#frontPageNav li').on('activate', function () { // This never gets emitted
  alert('activate!');
});

我想要窥探的内容是这样的:

<div data-spy="scroll" data-target="#frontPageNav">
  <div id="home-top" class="row slide">
  </div>
  <div id="home-how" class="row slide">
  </div>
  <div id="home-join" class="row slide">
  </div>
</div>

页面上没有其他元素有数据间谍属性,所以我觉得这应该是唯一的内容窥探,但显然不是:在页面加载我得到一个错误,Uncaught TypeError: Cannot read property 'top' of null这意味着该scrollspy插件试图找到$.position()的一个不存在的元素.我在Chrome的开发者工具中打开了异常制动器,并且未捕获的异常位于bootstrap.js的第454行,这是&& [[$href.position().top, href]]) || null,如果我悬停href,选择器是我在标记中没有的元素,但我有指向哈希的链接.

这是否意味着scrollspy插件认为它应该监视所有链接href="#something"并在具有该ID的标记元素中找到？为什么不将间谍活动保持在元素上data-spy="scroll"？

Answer 1

通过将ScrollSpy插件附加到特定元素,插件将侦听该元素上的滚动事件.但是,插件使用目标选项来确定哪些链接有资格激活.除非明确提供目标,否则ScrollSpy插件将刮擦整个正文以查找与选择器匹配的链接'.nav li > a'.通过提供目标,选择器将变为target + ' .nav li > a',将搜索限制在目标内.

API支持使用标记进行规范data-target,并将其作为JavaScript调用中的选项传递$('#myElement').scrollspy({target: '#myTarget'});.

有关ScrollSpy插件如何工作的更广泛的描述可以在如何激活Twitter Bootstrap Affix组件的链接的答案中找到？