wheelevent.js 是一个用于监听鼠标滚轮事件的 JavaScript 库，它可以轻松地为 DOM 元素添加滚轮事件监听器，支持跨浏览器，并提供了丰富的回调函数选项。这篇文章将介绍怎样使用 wheelevent.js，并提供一些示例代码，以方便读者理解和使用。
安装 wheelevent.js
使用 wheelevent.js 非常简单，你需要在你的项目中安装它，然后在代码中引入它即可。使用 npm 安装 wheelevent.js：
npm install wheelevent.js
对应的，你也可以下载 wheelevent.js 的源代码，然后在你的项目中手动引入。无论选择何种方式，一旦 wheelevent.js 被成功安装和引入，你就可以使用它提供的接口来监听鼠标滚轮事件了。
使用 wheelevent.js
wheelevent.js 提供了几个监听鼠标滚轮事件的接口，你可以根据你的需求选择适合你的方案。在下面的代码中，我们创建了一个 DOM 元素，然后用 wheelevent.js 提供的接口为这个元素添加了一个鼠标滚轮事件监听器：
import { addWheelListener } from 'wheelevent.js';
const element = document.getElementById('myElement');
addWheelListener(element, function (event) {
console.log(`Mouse wheel delta: ${event.deltaY}`);
event.preventDefault();
});在上面的代码中，我们使用 addWheelListener 函数为 myElement 元素添加了一个鼠标滚轮监听器。当鼠标滚轮事件发生时，回调函数将打印滚轮事件的 deltaY 属性。最后我们调用了 preventDefault 函数以阻止浏览器默认的鼠标滚轮事件行为。
wheelevent.js API
addWheelListener
添加鼠标滚轮事件监听器的函数，接收至少两个参数：
- element: 需要监听鼠标滚轮事件的 DOM 元素，类型为
HTMLElement - callback: 鼠标滚轮事件监听器，类型为
function(event: WheelEvent)
除此之外，addWheelListener 还提供了一些可选参数，你可以根据你的需求传入它们：
- options: 选项对象，可以指定以下可选属性：
- passive: 一个布尔值，指示是否将监听器注册为被动监听器。默认值为
false。 - capture: 一个布尔值，指示是否在捕获阶段上注册监听器。默认值为
false。
- passive: 一个布尔值，指示是否将监听器注册为被动监听器。默认值为
- context: 回调函数的上下文，类型为
object
removeWheelListener
从 DOM 元素中移除鼠标滚轮事件监听器的函数：
import { removeWheelListener } from 'wheelevent.js';
removeWheelListener(targetElement, callbackFunction);参数解释：
- targetElement: 准备移除鼠标滚轮事件监听器的 DOM 元素，类型为
HTMLElement。 - callbackFunction: 准备移除的鼠标滚轮事件监听器，类型为
function(event: WheelEvent)。
wheelDirection
一个将事件 delta 值映射到滚轮方向的函数。返回 -1 或 1，分别表示向下或向上滚动方向：
-- -------------------- ---- -------
------ - -------------- - ---- ----------------
----- ------- - -------------------------------------
------------------------- -------- ------- -
----- --------- - ----------------------
-- ---------- --- --- -
---------------------- --------
- ---- -
---------------------- ------
-
-----------------------
---wheelEnd
一个在滑动结束后触发的事件监听器函数：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ----- ------- - ------------------------------------- ------------------------- -------- ------- - ------------------ -------------- --- ----------------- -------- -- - ------------------ -------- ------- ---
browserPrefix
一个返回当前浏览器支持的 Mouse wheel 事件前缀。如果浏览器不支持此事件，则返回一个空字符串：
import { browserPrefix } from 'wheelevent.js';
console.log(`Browser prefix: ${browserPrefix}`);总结
使用 wheelevent.js 可以让你轻松地监听鼠标滚轮事件，并获得事件 delta 值，滚动方向，以及滚动结束状态等信息。通过上面提供的 API，在你的项目中使用 wheelevent.js 库也非常容易。如果你对使用 wheelevent.js 有任何疑问，请参考官方文档或者自行查找相关资料。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006710a8dd3466f61ffe0be