介绍
scrolling-observer是一个轻量级的JavaScript库，用于监听滚动事件并在元素进入和离开可视窗口时触发回调函数。这个库对实现类似于无限滚动加载、视差滚动等效果非常有用。
安装
使用npm进行安装：
npm install scrolling-observer
在你的项目中导入并初始化scrolling-observer：
import ScrollingObserver from 'scrolling-observer'; const observer = new ScrollingObserver();
接下来，我们将介绍如何使用这个库。
监听元素
可以使用observe()方法监听任何带有高度的元素，例如一个容器或列表：
const el = document.querySelector('.my-element');
observer.observe(el);在元素滚动时，可以使用on()方法监听事件。该方法接受两个参数：要监听的事件和回调函数。
observer.on('enter', el => console.log(`Element entered: ${el}`));
observer.on('exit', el => console.log(`Element exited: ${el}`));使用示例：
<div class="container"> <div class="card"></div> <div class="card"></div> <!-- ... --> </div>
-- -------------------- ---- ------- ----- --------- - ------------------------------------- ----- ----- - ------------------------------------ ------------------ -- ------------------------ -------------------- ---- -- - --------------------------------- --- ------------------- ---- -- - ------------------------------------ ---
当卡片进入可视窗口时，添加一个CSS类以触发动画效果，当卡片离开时，删除该类。
滚动事件
scrolling-observer监听以下事件：
enter：元素进入可视区域时触发。exit：元素离开可视区域时触发。progress：当元素滚动时跟随滚动时触发。可以获取元素在可视区域内的进度。
示例：
observer.on('progress', (el, progress) => {
console.log(`Element ${el} progress: ${progress}`);
});scrolling-observer可以进行更多的自定义配置，例如自定义滚动监听器的位置、阈值等等。更多信息请查阅API文档。
结论
scrolling-observer是一个非常有用的工具，可以轻松地处理滚动事件。这个库很轻巧，易于使用，并且可以应用于多种不同的应用程序，从单页应用程序到复杂的Web应用程序。通过使用滚动观察者，你可以创建出彩的滚动特效，让你的网站更加吸引人，同时提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5e51ab1864dac6712e