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