scrollgress 是一个用于监测滚动位置并触发事件的 npm 包。它是基于 jQuery 开发的，可以帮助开发者实现对元素滚动位置的追踪和处理。
安装
首先，在终端中进入你的项目根目录，使用 npm 安装 scrollgress：
npm install scrollgress另外，为了使用 jQuery，你还需要在 HTML 文件中引入 jQuery 库：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
使用方法
初始化
要使用 scrollgress，你需要将其引入你的 JavaScript 文件，并为指定元素初始化一个 scrollgress 实例：
import $ from 'jquery'; import Scrollgress from 'scrollgress'; const myElement = document.querySelector('.my-element'); const myScrollgress = new Scrollgress(myElement);
这里，我们首先通过 querySelector 方法找到了我们想要监测滚动位置的元素，然后将其传入了 Scrollgress 的构造函数中。通过这样的方式，我们就创建了一个新的 scrollgress 实例，并将其存储在 myScrollgress 变量中。
监测滚动位置
一旦我们成功初始化了 scrollgress 实例，我们就可以开始监测元素的滚动位置了。通过设置 onProgress 回调函数，我们可以获取当前元素已经滚动过的百分比：
myScrollgress.onProgress((progress) => { console.log(`Element has been scrolled ${progress}%`); });
这里，onProgress 方法接收一个回调函数作为参数。每当元素被滚动时，scrollgress 都会调用这个回调函数，并将当前已经滚动的百分比传递给它。我们可以在这个回调函数中实现任何自己想要的行为。
触发事件
除了监测滚动位置之外，scrollgress 还支持触发事件。通过设置 onEnter 和 onLeave 回调函数，我们可以在元素进入和离开视野时执行相应的操作：
myScrollgress.onEnter(() => { console.log('Element has entered the viewport'); }); myScrollgress.onLeave(() => { console.log('Element has left the viewport'); });
这里，onEnter 和 onLeave 方法都接收一个回调函数作为参数。当元素进入或离开视野时，scrollgress 会调用相应的回调函数，并执行其中的操作。
示例代码
下面是一个完整的示例代码，它演示了如何初始化 scrollgress 实例并监测元素的滚动位置。在这个示例中，我们在元素滚动到不同的位置时，改变了元素的背景色：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------------ --------------- ------- ----------- - ------- ------- ----------------- -------- ----------- ---------------- --- - ------------------------------ - ----------------- -------- - ------------------------------ - ----------------- -------- - ------------------------------ - ----------------- -------- - ------------------------------- - ----------------- ----- - -------- ------- ------ ---- ------------------------- ------- ----------------------------------------------------------- ------- --------------------------------------------------------------------- -------- ----- --------- - -------------------------------------- ----- ------------- - --- ----------------------- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------展开代码
