前言
当我们需要对页面中滚动条的状态进行监测和处理时，通常会使用一些比较麻烦的方法来实现，例如通过监听窗口的 scroll 事件并计算每个需要监听的元素相对窗口顶部的距离，进而判断元素是否进入视口等等。这些方法本质上都是比较复杂的，且容易出错，相信大家都有类似的经历。
而 npm 包 scrolled-past 就通过一个非常简单的方法来解决这个问题，我们只需要引入包并调用相应函数即可直接获取元素的滚动状态，极大地简化了操作难度和代码复杂度。本文将详细介绍 scrolled-past 的使用方法和一些实际案例，帮助读者更好地了解和应用这个包。
安装
我们可以通过 npm 直接安装 scrolled-past：
npm install scrolled-past
当然，也可以在代码中引入在线的资源：
<script src="https://unpkg.com/scrolled-past@1.0.0/dist/scrolled-past.min.js"></script>
接下来我们就可以在代码中调用 scrolled-past 包里的函数了。
使用
scrolled-past 包提供了三个函数来获取一个元素被滚动的状态，它们是：
- isElementAboveViewport：判断元素在视口上方时返回 true；
- isElementInViewport：判断元素在视口范围内时返回 true；
- isElementBelowViewport：判断元素在视口下方时返回 true。
这些函数都接收一个 DOM 元素作为参数，并返回一个布尔值作为结果。以下是一个简单的使用示例：
-- -------------------- ---- ------- ------ - ----------------------- -------------------- ---------------------- - ---- ---------------- ----- -- - -------------------------------------- -- ---------------------------- - ---------------- ------- -- ----- --- ----------- - ---- -- ------------------------- - ---------------- ------- -- -- --- ----------- - ---- -- ---------------------------- - ---------------- ------- -- ----- --- ----------- -
这段代码的作用是获取 id 为 my-element 的元素的滚动状态，并根据不同的状态打印不同的信息。需要注意的是，这个包不会自动监听滚动事件，然而我们可以轻松地通过原生 JavaScript 或其他框架来实现这一功能，下面会详细介绍。
实践案例
接下来我们将结合一些实际案例来更好地说明 scrolled-past 的用途和应用。
页面中固定在顶部的元素
我们通常会在页面上设置一些位置固定的元素，如顶部导航、悬浮工具栏等等，这些元素需要在页面滚动时做出一些相应的样式和位置调整。下面是一个例子，当用户向下滚动页面时，顶部导航会变成固定状态：
-- -------------------- ---- -------
------ - ---------------------- - ---- ----------------
----- --- - ----------------------------------
----- ------ - --------------
----------------------------------- -- -- -
-- ----------------------------- -
---------------------------
------------------------------ - ------------------------
- ---- -
------------------------------
------------------------------ - --
-
---这个例子中，我们获取了顶部导航的元素和其相对于文档顶部的距离，然后在监听滚动事件时判断元素是否已经进入视口上方，并根据结果来添加或移除 .fixed 样式，并动态调整页面的 padding top 值。这样我们就实现了一个简单的悬浮导航效果。
图片懒加载
图像预加载对于页面的性能优化非常重要，我们通常会使用一些 JavaScript 插件来实现图像的懒加载，下面是一个使用 scrolled-past 的懒加载示例：
-- -------------------- ---- -------
------ - ------------------- - ---- ----------------
----- ------ - -----------------------------------
----- ------ - ---------------------------------------
-------- ---------- -
-------------------- ------ -- -
----- --------- - ----- - --
-- ------------------------- -- ------------------ --- ------- -
------- - ------------------------
------------------ - -----
-
---
-
----------------------------------- ----------在这个例子中，我们获取了页面中所有使用 .lazy 类名的图像元素，然后在监听滚动事件时判断每个图像元素是否已经进入了视口范围内，并根据结果给其添加图片地址。这样我们就可以实现一个基本的图片懒加载效果了。
总结
scrolled-past 是一个非常简单且生产力很高的 npm 包，它可以帮助我们直接获取元素的滚动状态而不需要手动计算其相对窗口的距离等参数。借助这个包，我们可以更快速地实现一些常见的滑动效果，同时也避免了一些计算错误和出错的风险。希望本文能够帮助到大家，谢谢！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cb381e8991b448da1c0