如果你有使用自定义滚动条的需求，那么 @bezet/scrollbars 可以帮助你解决问题。在本文中，我们将介绍该 npm 包的使用教程，包括安装、配置、事件监听等方面。
安装
@bezet/scrollbars 需要依赖于 jQuery 和 perfect-scrollbar，因此在使用之前需要先安装它们。
--- ------- ------ ----------------- -----------------
配置
使用 @bezet/scrollbars 最重要的是要配置，否则无法运行成功。以下是一个简单的配置文件示例：
------ ---------- ---- --------------------
------ ----------------------------------------------
----- ------- - -
------------------- ---
------------------- ---
-------------------- --
-------------------- --
--------- -------------- -- -
---------------------- --------------
-
--
----- ---------- - --- ---------------------------- ---------我们通过 ES6 的模块导入将 Scrollbars 类引入到代码中，同时引入 perfect-scrollbar 的样式。然后，我们传递一个配置对象到 Scrollbars 构造函数中，其中包含以下配置项：
- minScrollbarLength：滚动条的最小长度，默认为 20。
- maxScrollbarLength：滚动条的最大长度，默认为 50。
- scrollXMarginOffset / scrollYMarginOffset：滚动条距离边界的偏移量，默认为 8。
- onScroll：滚动事件回调函数，接收一个滚动偏移量的参数。
最后，我们创建一个 Scrollbars 的实例并传递元素的选择器和配置对象作为参数。
方法
Scrollbars 实例包含了一些有用的方法，供我们调用来完成一些操作。下面是一些常用的方法和说明：
scrollTo(x, y)
滚动到指定的坐标。x 和 y 是两个数字参数。
---------------------- -----
scrollToElement(el, offset)
滚动到指定元素，并可以通过 offset 参数调整偏移量。
----- -- - -------------------------------------- ------------------------------ ----- -----
getSize()
获取滚动边界的大小。
--------------------- -- ---------- ---- ------- ----
getScrollOffset()
获取当前滚动位置的偏移量。
----------------------------- -- ------ --- -- ----
事件
使用 Scrollbars 实例可以监听多种事件，包括滚动事件、滚动到顶部事件、滚动到底部事件等等。下面是一些常用的事件和说明：
onScroll(info)
滚动事件，在滚动时会触发。
-------------------------- -- -
---------------------- -------------
---onXReachEnd()
水平滚动到右端事件。
------------------------- -- -
---------------- ----------
---onYReachEnd()
垂直滚动到底部事件。
------------------------- -- -
---------------- ----------
---总结
@bezet/scrollbars 是一个非常方便的 npm 包，可以帮助我们快速实现自定义滚动条的功能。在本文中，我们了解了它的安装、配置、方法和事件等方面的知识，并给出了示例代码。希望这篇文章可以帮助您更好地了解和使用该 npm 包。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005761781e8991b448ea8da