简介
gumshoejs 是一个 JavaScript 库，它提供了一种简单的方式来在页面上跟踪当前滚动到的位置。它可以用于创建自定义的滚动跟踪功能，比如在单页应用程序中跟踪当前导航菜单项、高亮当前阅读的章节等等。
安装
gumshoejs 是一个 npm 包，可以使用 npm 命令来安装。
npm install gumshoe
使用
基础用法
使用 gumshoejs 最简单的方式就是在页面上添加一个具有相应属性的 HTML 元素。例如，以下代码会在页面上监听所有含有 data-gumshoe 的 a 元素：
<nav>
<ul>
<li><a href="#section1" data-gumshoe>Section 1</a></li>
<li><a href="#section2" data-gumshoe>Section 2</a></li>
<li><a href="#section3" data-gumshoe>Section 3</a></li>
<li><a href="#section4" data-gumshoe>Section 4</a></li>
</ul>
</nav>使用以下 JavaScript 代码初始化 gumshoejs：
var spy = new Gumshoe('#navbar a[data-gumshoe]');这个代码块指定了要监听的元素，其中 "#navbar a[data-gumshoe]" 是一个 CSS 选择器，用于选择具有 data-gumshoe 属性的 a 元素。通过这种方式，Gumshoe 会自动将每个滚动位置映射到页面上相应的元素。并且，在当前元素进入视图时，会自动 class 属性为 active。
指定选项
除了基础用法之外，gumshoejs 还提供了许多其他选项。以下是一些最常见的选项:
container: 监听滚动事件的容器。默认情况下，Gumshoe 监听 document 的滚动事件，但是可以通过这个选项来指定一个不同的容器。navClass: 当前活动元素的 class。默认情况下，这个值为active。offset: 距离屏幕顶部的偏移量。默认情况下，这个值为 0。repeateDelay: 滚动时是否重复激活事件，默认值为 true。
以下代码展示了如何指定这些选项:
var spy = new Gumshoe('#navbar a[data-gumshoe]', {
navClass: 'active',
offset: 200,
container: '#scroll-container',
repeatDelay: true
});函数回调
gumshoejs 也提供了一种简单的方式来处理当前元素更改时的事件。可以通过将一个回调函数指定为 events 选项来实现：
-- -------------------- ---- ------- --- --- - --- ---------------- ----------------- - ------- ----- --------- --------- ------- ---- ---------- -------------------- ------------ ---- --- ---------------- -------- ------- - ---------------------- - ---------------------------------- ---
这个代码块指定将事件处理的变量显示在控制台上。event.target 是当前活动元素的 DOM 元素。
示例代码
以下是一个完整的示例代码，使用 gumshoejs 来跟踪导航菜单的位置：
-- -------------------- ---- -------
--------- -----
------
------
---------------- ----------
----- ----------------
-------
----- ---- -
------- --
-------- --
------- -----
------------ -----------
------ -----
-
--- -
--------- ------
---- --
----- --
------ -----
----------- --------
----------- - --- --- ------- -- -- -----
-------- ---
-
-- -
----------- -----
------- --
-------- --
-------- -----
---------------- --------------
------------ -------
---------- -------
------- -----
------- - -----
-
-- -- -
----- --
----------- -------
-
-- -- - -
------ -----
---------------- -----
-------- ------
-------- ---- --
----------- ----- --- -------
-
-- -- ------- -
------ -----
-
-- --------- --
-- -- ------- -
------ -----
------------ -----
-------------- --- ----- -----
-
---------- -
---------- -------
------- - -----
-------- ---- --
-
--- --- --- --- --- -- -
------ -----
-------------- -----
-
- -
------------ ----
-------------- ----
-
------------ -
-------------- --
-
--- -
------------ ----------
------------ ---------
------- --- --
------- --- ----- -----
----------- --------
-------- -----
-
---- -
------------ ----------
----------- --------
------- --- ----- -----
-------- ----
-
--------
-------
------
-----
--- ------------
------ ------------- ------------------------
------ --------------- ------------------------
------ ------------- ------------------------
------ ---------------- --------------------------
-----
------
---- ------------------
--- ------------------
------------ --- ---------- -----------------------------------------------------------------------------------
-------------- ------- --------------------
--- --------------------
------------ --- --- ------ --- ----------
-------------- ------- --------------------
--- ------------------
------------------ ---- ------ --------------
----------------------
----------
--------------- ---------------- ----------------------- ----------------------
--------------- ---------------- ----------------------- ----------------------
--------------- ---------------- ----------------------- ----------------------
--------------- ---------------- ----------------------- ----------------------
-----------
-------------------------
------- ---------- ----- --------------
-------------- --- - --- ---------------- -------------------------------
--- -----------------------
----------------------
-------------- --- - --- ---------------- ----------------- -
------- -----
--------- ---------
------- ----
---------- --------------------
------------ ----
---
---------------- -------- ------- -
---------------------- - ----------------------------------
----------------
------
------- -------------------------------------------
--------
--- --- - --- ---------------- ----------------- -
--------- --------
---
---------
-------
-------总结
gumshoejs 是一个非常实用的 JavaScript 库，可以轻松地创建自定义的滚动跟踪功能。该库容易使用且功能强大，可用于各种应用程序，并且可以搭配具有活动状态的导航菜单等使用。在实际项目中，gumshoejs 经常使用，建议前端工程师掌握这个库的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaa53b5cbfe1ea0610452