スクロールスパイ

スクロールスパイは、特定の要素を追跡し、ユーザーの画面が現在中心に表示されている要素を追跡する jQuery プラグインです。これにまつわる私たちの主なデモは、あらゆるドキュメントページにある、右側の目次にあります。これらのリンクをクリックすると、ページがスクロールされてその要素に移動します。


  <div class="row">
    <div class="col s12 m9 l10">
      <div id="introduction" class="section scrollspy">
        <p>Content </p>
      </div>

      <div id="structure" class="section scrollspy">
        <p>Content </p>
      </div>

      <div id="initialization" class="section scrollspy">
        <p>Content </p>
      </div>
    </div>
    <div class="col hide-on-small-only m3 l2">
      <ul class="section table-of-contents">
        <li><a href="#introduction">Introduction</a></li>
        <li><a href="#structure">Structure</a></li>
        <li><a href="#initialization">Intialization</a></li>
      </ul>
    </div>
  </div>


  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.scrollspy');
    var instances = M.ScrollSpy.init(elems, options);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('.scrollspy').scrollSpy();
  });

名前	タイプ	デフォルト	説明
throttle	数値	100	スクロールハンドラーのスロットル。
scrollOffset	数値	200	スクロールされる要素の中心を合わせるためのオフセット。
activeClass	文字列	'active'	アクティブな要素に適用されるクラス。
getActiveElement	関数		アクティブな要素を検索するために使用されます。

getActiveElement

これは、id がスクロールスパイ要素の id である、アクティブな要素を検索するために使用されるデフォルト関数です。アクティブとしてマークする要素の CSS セレクターを返します。


  function(id) {
    return 'a[href="#' + id + '"]';
  }

jQuery がもはや依存関係ではなくなったので、メソッドはすべてプラグインインスタンスに対して呼び出されます。以下のようにプラグインのインスタンスを取得できます
  var instance = M.ScrollSpy.getInstance(elem);

  /* jQuery Method Calls
    You can still use the old jQuery plugin method calls.
    But you won't be able to access instance properties.

    $('.scrollspy').scrollSpy('methodName');
  */
          