menu

滚动监听是一个jQuery插件，用于追踪某一确定元素并且元素目前处于用户屏幕的焦点。我们的示例在每个文档页的右边。单击这些链接将滚动到页面元素的位置。 


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

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

      <div id="initialization" class="section scrollspy">
        <p>内容 </p>
      </div>
    </div>
    <div class="col hide-on-small-only m3 l2">
      <ul class="section table-of-contents">
        <li><a href="#introduction">介绍</a></li>
        <li><a href="#structure">结构</a></li>
        <li><a href="#initialization">初始化</a></li>
      </ul>
    </div>
  </div>

初始化


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

  // 或用JQuery

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

选项

名称 类型 默认 描述
throttle Number 100 Throttle of scroll handler.
scrollOffset Number 200 Offset for centering element when scrolled to.
activeClass String 'active' Class applied to active elements.
getActiveElement Function Used to find active element.

获取当前激活的元素
这是用于查找激活元素的默认函数，其中id是滚动监听元素的id。它返回要标记为活动的元素的CSS选择器。 

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

方法

因为jQuery不再是一个依赖项，所以所有的方法都是在插件实例上调用的。你可以获得插件实例如下：


  var instance = M.ScrollSpy.getInstance(elem);

  /* JQuery方法调用
          您仍然可以使用旧的jQuery插件方法调用。
      但您将无法访问实例属性。

    $('.scrollspy').scrollSpy('方法名称');
  */
.destroy();

销毁插件实例并回收


instance.destroy();

属性

名称 类型 描述
el Element 插件初始化时使用的DOM元素。
options Object 初始化实例时使用的选项。