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>

页面上没有其他元素具有data-spy属性，所以我认为这应该是唯一的间谍内容，但显然不是：在页面加载时我收到错误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'});中将其作为选项传递。

可以在an answer to How to activate links for Twitter Bootstrap Affix component?

中找到有关ScrollSpy插件如何工作的更广泛描述

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

1 个答案: