前言
在 Web 前端开发中，能够滚动的组件很多，如轮播图、滚动列表等等。但是有些时候，我们需要控制这些组件的滚动方向，如何实现呢？现在有一个 npm 包叫做 wheel-direction ，它可以让你轻松地控制需要滚动的组件的滚动方向。
安装
wheel-direction 是一个 npm 包，所以我们需要在终端中输入以下命令来安装它：
npm install wheel-direction --save
用法
这个包提供了两种方法来使用它，一种是直接调用 wheelDirection() 方法，另一种是用自定义指令来调用它。
wheelDirection() 方法
调用 wheelDirection() 方法的语法非常简单，只需要传入需要实现滚动方向控制的元素即可。以下是一个示例代码：
<div id="myDiv"></div>
<script src="path/to/wheel-direction.min.js"></script>
<script>
var myDiv = document.getElementById('myDiv');
wheelDirection(myDiv);
</script>这样，myDiv 元素就可以通过鼠标滚轮控制它的滚动方向了。
自定义指令
如果你使用 Vue.js 等前端框架，可以通过自定义指令来调用 wheel-direction 包。以下是一个 Vue.js 的自定义指令示例：
Vue.directive('wheel-direction', {
inserted: function(el) {
wheelDirection(el);
}
});这样，我们就可以在 HTML 中直接使用 wheel-direction 指令了：
<div v-wheel-direction></div>
在这个示例中，我们的元素不需要指定 id 或 class，只需要在需要的地方使用 v-wheel-direction 指令即可。
参数
wheelDirection() 方法还可以接受一个可选的配置对象作为参数。以下是这个对象的属性：
direction: 可以是字符串 'horizontal' 或 'vertical'，用于指定滚动方向。默认为 'vertical'。onScroll: 当元素滚动时执行的回调函数。onInit: 初始化完成后执行的回调函数。
以下是一个示例代码：
-- -------------------- ---- -------
---- -----------------
------- ----------------------------------------------
--------
--- ----- - ---------------------------------
--------------------- -
---------- -------------
--------- ------------------- -
------------------- ---------- - - -----------
--
------- ---------- -
----------------------------
-
---
---------结论
使用 wheel-direction 可以让我们轻松地控制需要滚动的组件的滚动方向。无论是通过调用 wheelDirection() 方法还是通过自定义指令，都非常方便易懂。如果你现在需要控制滚动方向，那么 wheel-direction 包就是你的不二选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006710a8dd3466f61ffe0c4