在开发前端页面时，经常需要在页面滚动时触发某些操作。本文介绍 when-scroll NPM包的使用方法，它是一个轻量级的 JavaScript 库，可以帮助开发人员在页面滚动时执行各种操作。
安装
可以通过 NPM 包管理工具进行安装：
npm install when-scroll
使用
使用 when-scroll 非常简单。首先，将 when-scroll 导入你的 JavaScript 文件中：
const whenScroll = require('when-scroll');然后，你可以为浏览器窗口的滚动事件添加回调函数，如下所示：
whenScroll(() => {
console.log('Window scrolled!');
});当页面滚动时，这个 console 语句将被执行。此外，还可以指定其他选项，如下所示：
whenScroll({
el: document.querySelector('.my-element'),
offset: 100,
direction: 'down',
callback: () => {
console.log('My element scrolled down 100 pixels!');
},
});这个示例代码中，我们指定了选择器 .my-element 作为滚动的元素，使回调函数在页面向下滚动 100 像素时执行。
选项
在 when-scroll 的回调函数中可以使用以下选项：
el
指定滚动的元素。默认为 window，即整个浏览器窗口。
whenScroll({
el: document.querySelector('.my-element'),
callback: () => {
console.log('My element scrolled!');
},
});offset
指定滚动的偏移量，单位为像素。默认为 0，即滚动到元素顶部。
whenScroll({
el: document.querySelector('.my-element'),
offset: 100,
callback: () => {
console.log('My element scrolled 100 pixels!');
},
});direction
指定滚动的方向。可以是 'up' 或 'down'。默认为 'up'，即向上滚动。
whenScroll({
el: document.querySelector('.my-element'),
offset: 100,
direction: 'down',
callback: () => {
console.log('My element scrolled down 100 pixels!');
},
});callback
指定要运行的回调函数。可以是任何函数或函数表达式。
whenScroll(() => {
console.log('Window scrolled!');
});示例
下面是一个示例：当滚动到页脚时，显示一个“返回顶部”按钮。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------- ------ ---------------
-------
------
---- ------------------
-------- ----- ----- --- ----- ----------- ---------- ----- --- ------- ------ ----- ----- ------- ------ -------- ----- ---------- ------- -- ------ --- ---------- ----------- --------- --------- ---- -- --------- --- ------ ----- --- ---- ----- -------- --------------
-------------- -- --------- ----- ------- --- --------- ----- --- ------- ------- ------- ------- --------- -------- ----- ----------- ------ ------- -- ------- --- ------- --- ------- ------ ----- --- ---- -------- --- ------- ----- -------- ------- --------- ------ -- ---- -------- - ------- ----- ------------- --------- ----------- --- ----- -- --------- ------ --------- ---- ----- - ------- ---- ------- ---- ----- --- ---- -----------
-------- ------ ----- --- ----- --------- -- -------- ---- ---------- ------ ---- ------ ------- -------- ------ --- ------- ------ --- ------- --------- ------- --- ---- -------- -- ---------- --- ----------- --- ---- -- ----- ------ ----------- --- --------- ---- ---------- -- ----- --- ---- ---- ------- ------- -- -- ------ ----- ----------- ------ - ------ -------- --- ----------- ----- -------- ----- --- ------- -------- --- ------ ----- -------- -------- ---------
----- ------ -- ---- -- -------- ------ -- ------ ------ --------- -------- ------ --- ------ ----------- ----- ---- -------- ----- -- ------- --- ----- -- ----- --- --------- ----- ---- -------- -------- ----------- ------- ----- -- ----- ---------- -- --------- ----- -------- ------ ------ ------ -- ----- ------- --- ------ ----- -------- ------ ---- --------- ------ -- --------- -- ------ --- --------- ----------- -------- -- --- ----------- ------- -- --------- -----------
------
------- -------------- --------------- ----------- -- ------------
------- --------------------------------------------------------------------------------
--------
----- ----------- - ----------------------------------
------------
--------- -- -- -
----- -------------- - ---------------
----- ---------- - ------------------------------------- - -------------------
-- --------------- - ---------- - ----- -
------------------------- - --------
- ---- -
------------------------- - -------
-
--
---
------------------------------------- -- -- -
----------------- ---- -- --------- -------- ---
---
---------
-------
-------在这个示例中，当页面滚动距离达到页面高度的 25% 时，显示“返回顶部”按钮。当点击该按钮时，页面滚动到顶部，并且采用平滑的滚动方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006710b8dd3466f61ffe10b