npm 包 gumshoejs 使用教程

简介

gumshoejs 是一个 JavaScript 库，它提供了一种简单的方式来在页面上跟踪当前滚动到的位置。它可以用于创建自定义的滚动跟踪功能，比如在单页应用程序中跟踪当前导航菜单项、高亮当前阅读的章节等等。

安装

gumshoejs 是一个 npm 包，可以使用 npm 命令来安装。

--- ------- -------

使用

基础用法

使用 gumshoejs 最简单的方式就是在页面上添加一个具有相应属性的 HTML 元素。例如，以下代码会在页面上监听所有含有 data-gumshoe 的 a 元素：

-----
  ----
    ------ ---------------- -------------------- ----------
    ------ ---------------- -------------------- ----------
    ------ ---------------- -------------------- ----------
    ------ ---------------- -------------------- ----------
  -----
------

使用以下 JavaScript 代码初始化 gumshoejs：

--- --- - --- ---------------- ------------------

这个代码块指定了要监听的元素，其中 "#navbar a[data-gumshoe]" 是一个 CSS 选择器，用于选择具有 data-gumshoe 属性的 a 元素。通过这种方式，Gumshoe 会自动将每个滚动位置映射到页面上相应的元素。并且，在当前元素进入视图时，会自动 class 属性为 active。

指定选项

除了基础用法之外，gumshoejs 还提供了许多其他选项。以下是一些最常见的选项:

  • container: 监听滚动事件的容器。默认情况下，Gumshoe 监听 document 的滚动事件，但是可以通过这个选项来指定一个不同的容器。
  • navClass: 当前活动元素的 class。默认情况下，这个值为 active。
  • offset: 距离屏幕顶部的偏移量。默认情况下，这个值为 0。
  • repeateDelay: 滚动时是否重复激活事件，默认值为 true。

以下代码展示了如何指定这些选项:

--- --- - --- ---------------- ----------------- -
  --------- ---------
  ------- ----
  ---------- --------------------
  ------------ ----
---

函数回调

gumshoejs 也提供了一种简单的方式来处理当前元素更改时的事件。可以通过将一个回调函数指定为 events 选项来实现：

--- --- - --- ---------------- ----------------- -
  ------- -----
  --------- ---------
  ------- ----
  ---------- --------------------
  ------------ ----
---

---------------- -------- ------- -
  ---------------------- - ----------------------------------
---

这个代码块指定将事件处理的变量显示在控制台上。event.target 是当前活动元素的 DOM 元素。

示例代码

以下是一个完整的示例代码，使用 gumshoejs 来跟踪导航菜单的位置：

--------- -----
------
------
  ---------------- ----------
  ----- ----------------
  -------
    ----- ---- -
      ------- --
      -------- --
      ------- -----
      ------------ -----------
      ------ -----
    -

    --- -
      --------- ------
      ---- --
      ----- --
      ------ -----
      ----------- --------
      ----------- - --- --- ------- -- -- -----
      -------- ---
    -

    -- -
      ----------- -----
      ------- --
      -------- --
      -------- -----
      ---------------- --------------
      ------------ -------
      ---------- -------
      ------- -----
      ------- - -----
    -

    -- -- -
      ----- --
      ----------- -------
    -

    -- -- - -
      ------ -----
      ---------------- -----
      -------- ------
      -------- ---- --
      ----------- ----- --- -------
    -

    -- -- ------- -
      ------ -----
    -

    -- --------- --
    -- -- ------- -
      ------ -----
      ------------ -----
      -------------- --- ----- -----
    -

    ---------- -
      ---------- -------
      ------- - -----
      -------- ---- --
    -

    --- --- --- --- --- -- -
      ------ -----
      -------------- -----
    -

    - -
      ------------ ----
      -------------- ----
    -

    ------------ -
      -------------- --
    -

    --- -
      ------------ ----------
      ------------ ---------
      ------- --- --
      ------- --- ----- -----
      ----------- --------
      -------- -----
    -

    ---- -
      ------------ ----------
      ----------- --------
      ------- --- ----- -----
      -------- ----
    -
  --------
-------
------
  -----
    --- ------------
      ------ ------------- ------------------------
      ------ --------------- ------------------------
      ------ ------------- ------------------------
      ------ ---------------- --------------------------
    -----
  ------

  ---- ------------------
    --- ------------------
    ------------ --- ---------- -----------------------------------------------------------------------------------
    -------------- ------- --------------------

    --- --------------------
    ------------ --- --- ------ --- ----------
    -------------- ------- --------------------

    --- ------------------
    ------------------ ---- ------ --------------
    ----------------------
  ----------
    --------------- ---------------- ----------------------- ----------------------
    --------------- ---------------- ----------------------- ----------------------
    --------------- ---------------- ----------------------- ----------------------
    --------------- ---------------- ----------------------- ----------------------
  -----------
-------------------------

    ------- ---------- ----- --------------
    -------------- --- - --- ---------------- -------------------------------

    --- -----------------------
    ----------------------
    -------------- --- - --- ---------------- ----------------- -
  ------- -----
  --------- ---------
  ------- ----
  ---------- --------------------
  ------------ ----
---

---------------- -------- ------- -
  ---------------------- - ----------------------------------
----------------
  ------

  ------- -------------------------------------------
  --------
    --- --- - --- ---------------- ----------------- -
      --------- --------
    ---
  ---------
  -------
-------

总结

gumshoejs 是一个非常实用的 JavaScript 库，可以轻松地创建自定义的滚动跟踪功能。该库容易使用且功能强大，可用于各种应用程序，并且可以搭配具有活动状态的导航菜单等使用。在实际项目中，gumshoejs 经常使用，建议前端工程师掌握这个库的使用。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedaa53b5cbfe1ea0610452

阅读全文

猜你喜欢

  • npm 包 Licensee 使用教程

    引言 Licensee 是一个 Node.js 用来处理开放源代码许可证的工具，它可以帮助你检查你的项目是否符合开放源代码许可证要求。在开发过程中，开发人员需要考虑是否需要遵守特定的许可证，以及是否需...

    4 年前
  • npm 包 npm-consider 使用教程

    介绍 npm-consider 是一个非常实用的 npm 包，用于根据 npm 模块的相关信息提供最佳建议。它可以根据不同的维度，如质量、流行度、活跃度和维护频率等，评估一个 npm 模块，并给出指导...

    4 年前
  • npm 包 @types/ember__application 使用教程

    前言 在日常的前端开发中，我们经常需要使用各种工具和框架，其中 Ember.js 是一个受欢迎的 JavaScript 框架，它提供了一套完整的 MVC 架构模式及丰富的功能模块，使我们可以更加高效地...

    4 年前
  • npm 包 @types/ember__error 使用教程

    简介 @types/ember__error 是一个基于 TypeScript 的 npm 包，用于在 Ember 应用中使用错误类型。 本文将介绍如何使用 @types/ember__error 包...

    4 年前
  • NPM包@types/htmlbars-inline-precompile使用教程

    简介 @types/htmlbars-inline-precompile 是一个TypeScript类型定义文件，用于在Ember.js中使用HTMLBars模板引擎的预编译器。

    4 年前
  • npm 包 @types/ember__object 使用教程

    介绍 @types/ember__object 是一个 npm 包，用于在 TypeScript 项目中使用 Ember.Object 类型注释。Ember.Object 是 Ember.js 框架中...

    4 年前
  • npm 包 parse-ansi 使用教程

    简介 parse-ansi 是一个 npm 包，用于解析控制台输出中的 ANSI 转义序列。ANSI 转义序列用于在控制台中添加格式化效果，如修改字体颜色、移动光标等。

    4 年前
  • npm 包 itermcolors-to-hex 使用教程

    介绍 npm 是一个包管理器，旨在使开发者更轻松地使用和共享代码。其中，itermcolors-to-hex 是一个 npm 包，用于将 iTerm 配色方案中的颜色转换为十六进制码，使得在开发过程中...

    4 年前
  • npm 包 ansi-to 使用教程

    在前端开发中，我们经常需要处理命令行输出的颜色信息。而 ansi-to 就是一个非常优秀的 JavaScript 库，它可以让你方便地处理 ANSI 转义字符，将其转换为 HTML 格式的颜色信息。

    4 年前
  • npm 包 html-colors 使用教程

    介绍 在前端开发中，掌握如何使用颜色是一个必备的技能。html-colors 是一款颜色处理工具，可以帮助我们更方便的处理颜色相关的事务。它可以用于 CSS、JavaScript 等多种场合。

    4 年前
  • npm 包 ansi-to-svg 使用教程

    在前端开发中，我们经常使用命令行工具。命令行输出的颜色往往是不同的，以区分不同类型的信息。我们可以使用 ansi-to-svg 这个 npm 包将 ANSI 颜色代码转换成 SVG 图像，这样可以更加...

    4 年前
  • npm 包 command-line-publish 使用教程

    前言 随着前端技术的不断进步，开发者需要在开发过程中不断学习新的工具和发行方式。npm 是前端开发中必不可少的工具之一，我们在项目中经常需要将自己开发的代码上传至 npm，以供其他开发者进行使用。

    4 年前
  • NPM 包 Pollock 使用教程

    Pollock 是一个用于生成 Colorful Noise（有色噪声）图像的 npm 包，可以用于在前端项目中创建独特的背景图案或艺术设计元素。本文将介绍 Pollock 的安装与基本用法，以及如何...

    4 年前
  • npm 包 convert-svg-core 使用教程

    convert-svg-core 是一个强大的 npm 包，能够帮助前端开发者轻松地将 SVG 图片转换为其他格式，如 PNG、JPEG 等。使用 convert-svg-core 可以提高开发效率，...

    4 年前
  • npm 包 convert-svg-test-helper 使用教程

    介绍 convert-svg-test-helper 是一个方便的 npm 包，可以用于生成测试用例所需的 SVG 文件和相应的 PNG 文件。本文将详细介绍如何使用该包，以及如何在前端项目中应用它。

    4 年前
  • npm 包 convert-svg-to-png 使用教程

    在前端开发中，我们常常需要将 SVG 图形转换为 PNG 格式，以便在浏览器中展示或者下载。在这种情况下，npm 包 convert-svg-to-png 可以帮助我们快速地完成这个任务。

    4 年前
  • npm 包「coveradge」使用教程

    在前端开发中，测试对于保证代码质量至关重要。而在测试过程中，覆盖率测试也是一个不可忽视的环节。为了更好地进行覆盖率测试，我们可以使用优秀的 npm 包「coveradge」。

    4 年前
  • npm 包 @types/ember__array 使用教程

    在前端开发过程中，经常会用到大量的 JavaScript 库和框架，这些库和框架提供了丰富的 API，方便我们进行开发。然而，这些 API 的文档不尽相同，且时常难以理解，开发者可能会遇到不同框架或库...

    4 年前
  • npm 包 @types/ember__component 使用教程

    在前端开发中，使用框架是司空见惯的事情。而使用 TypeScript 开发框架时，我们也需要使用 TypeScript 的类型定义，以便编译器可以提供更好的类型检查和智能提示。

    4 年前
  • npm 包 @types/ember__controller 使用教程

    在 Ember.js 中，控制器 (controller) 是一个重要的概念。它用于管理模板 (template) 中所需的数据和业务逻辑。 当我们想要在 TypeScript 环境下使用 Ember...

    4 年前

相关推荐

    暂无文章