Scrollspy 是一个 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();
  });
        

选项

名称	类型	默认值	说明
节流	数字	100	滚动处理器的节流。
scrollOffset	数字	200	滚动到时居中元素的偏移量。
activeClass	字符串	'active'	应用于活动元素的类。
getActiveElement	函数		用于查找活动元素。

getActiveElement

这是用于查找活动元素的默认函数，其中 id 是 scrollspy 元素的 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');
  */
          

.destroy();

销毁插件实例并拆除

instance.destroy();
        

属性

名称	类型	说明
el	元素	用于初始化插件的 DOM 元素。
options	对象	用于初始化实例的选项。