3

私は 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します$.position()。存在しない要素。Chrome の開発者ツールで例外ブレーキをオンにしました。キャッチされなかった例外は、bootstrap.js の 454 行目にあり、&& [[$href.position().top, href]]) || nullホバーhrefすると、セレクターはマークアップにない要素用ですが、それを含むハッシュへのリンク。

これは、scrollspy プラグインが、すべてのリンクをスパイしhref="#something"、その ID を持つマークアップ要素を見つけることになっていると考えていることを意味しますか? で要素にスパイ アクションを維持しないのはなぜdata-spy="scroll"ですか。

4

1 に答える 1

5

ScrollSpy プラグインを特定の要素にアタッチすると、プラグインはその要素のスクロール イベントをリッスンします。ただし、プラグインはターゲットオプションを使用して、有効化できるリンクを決定します。ターゲットが明示的に指定されていない限り、ScrollSpy プラグインは、セレクターに一致するリンクの本文全体'.nav li > a'をスクレイピングします。ターゲットを指定すると、セレクターは になり、検索をターゲットtarget + ' .nav li > a'内に限定します。

API はdata-target、 を使用したマークアップによる仕様と、JavaScript 呼び出しでオプションとして渡すことによる仕様をサポートしています$('#myElement').scrollspy({target: '#myTarget'});。

ScrollSpy プラグインがどのように機能するかについてのより広範な説明は、How to activate links for Twitter Bootstrap Affix component? への回答にあります。

于 2012-08-30T05:36:51.307 に答える