在前端开发中，经常需要对滚动条进行样式定制和功能拓展。而 beautiful-scrollbar 是一个能够帮助我们定制滚动条样式并提供一些滚动条功能的 npm 包。在本文中，我们将会介绍如何使用 beautiful-scrollbar 这个 npm 包。
安装
要使用 beautiful-scrollbar，首先需要在项目中安装该 npm 包。安装的命令行如下所示：
npm install beautiful-scrollbar
使用方法
基本使用
安装后，我们需要在代码中引入 beautiful-scrollbar 包。引入代码如下所示：
import beautifyScrollbar from 'beautiful-scrollbar';
然后，我们需要为我们需要添加滚动条的元素添加样式，这样才能让 beautiful-scrollbar 生效。样式代码如下所示：
-- -------------------- ---- ------- ------------------------ - -- ---- ------- ------ -- --------- --------- --------- ------- - ------------------------ ------------------- - -- ---- ------- ------ -- --------- --------- ---- -- ----- -- ------ -- ------- -- --------- ----- -
在上面的代码中，我们为滚动元素 .your-scrollable-element 添加了样式。这个元素必须有 position: relative 和 overflow: hidden 样式。
然后，我们需要将滚动元素内部的内容包裹在一个具有 position: absolute 样式的 div 元素中，该元素必须有 top: 0、left: 0、right: 0 和 bottom: 0 样式，以确保其填充整个滚动元素。
一旦我们的样式准备就绪，我们可以调用 beautifyScrollbar() 函数，该函数接受一个选择器，该选择器用于选择需要添加滚动条的元素。示例代码如下所示：
beautifyScrollbar('.your-scrollable-element');现在，我们的滚动元素就已经拥有了漂亮的滚动条。
进阶使用
beautiful-scrollbar 还提供了一些配置选项，用于拓展滚动条的功能。具体的配置选项和使用方法，可以参考官方网站中的文档。在这里，我们只介绍其中几个常用的配置选项。
wheelPropagation
这个选项的作用是控制滚轮事件是否会向上级容器传递。若开启该选项，滚轮事件不会向上级容器传递。示例代码如下所示：
beautifyScrollbar('.your-scrollable-element', {
wheelPropagation: true
});swipeEasing
这个选项的作用是控制平滑滚动动画的速度曲线。可以设置为 ease-in-out 或自定义贝塞尔曲线。示例代码如下所示：
beautifyScrollbar('.your-scrollable-element', {
swipeEasing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'
});小结
在本文中，我们介绍了 beautiful-scrollbar 这个 npm 包的使用方法和常用配置选项。通过使用这个包，我们可以轻松定制自己的滚动条样式，并提供一些滚动条拓展功能。这个包非常方便，因此应该将其加入我们的前端工具库，以便于今后的开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557ba81e8991b448d4c42