在前端开发中，滚动条是一个常见的 UI 组件。而 jQuery Scrollbar 是一个方便易用的 jQuery 插件，可以快速地创建自定义风格的滚动条。本文将介绍如何使用 npm 包 jquery.scrollbar。
安装
首先，我们需要安装该插件的 npm 包。打开终端，进入项目目录，执行以下命令：
npm install jquery.scrollbar --save
这将会在项目中添加 jquery.scrollbar 的依赖，并将其保存到 package.json 文件中的 dependencies 字段中。
引入
安装成功后，我们就可以在项目中引入该插件了。通常情况下，我们需要在 HTML 文件中先引入 jQuery 库，再引入 jquery.scrollbar：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="node_modules/jquery.scrollbar/jquery.scrollbar.min.js"></script> <link rel="stylesheet" href="node_modules/jquery.scrollbar/jquery.scrollbar.css">
使用
jquery.scrollbar 提供了丰富的 API，可以根据需求来设置和操作滚动条。下面是一些常用的用法：
初始化
初始化一个滚动条非常简单，只需要调用 scrollbar() 方法即可：
$('.scrollable').scrollbar();其中，.scrollable 是我们要添加滚动条的元素的类名。
选项设置
jquery.scrollbar 提供了一些选项来控制滚动条的外观和功能。比如，我们可以设置滚动条的宽度、颜色等：
$('.scrollable').scrollbar({
"size": "8px",
"color": "#000",
"background": "#f2f2f2"
});方法调用
jquery.scrollbar 还提供了一些方法来操作滚动条。比如，我们可以通过 scrollTo() 方法来滚动到指定位置：
$('.scrollable').scrollbar('scrollTo', 100);这将会将 .scrollable 元素滚动到距离顶部 100 像素的位置。
示例代码
下面是一个完整的示例，展示了如何使用 jquery.scrollbar 来创建自定义风格的滚动条：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- --------- ------------
----- ---------------- ----------------------------------------------------------
-------
------
---- ------------------ -------------- ------ ----------- -------
----
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-------- -------
-------- -------
-------- -------
-------- -------
-------- -------
-------- -------
-------- -------
-------- -------
-------- -------
-------- -------
-------- -------
-----
------
------- -----------------------------------------------------------
------- ---------------------------------------------------------------------
--------
----------------------------
------- ------
-------- -------
------------- ---------
---
---------
-------
-------这段代码将会在一个高度为 200 像素的容器中创建
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35989