前言
在现代化的 Web 应用中，滚动条已经成为了必不可少的元素。然而，原生滚动条的样式与美观程度却不能满足现代用户的审美及使用习惯。这时候，一个好用的滚动条插件便派上了用场。而今天主要要介绍的正是这样一款插件：@dawid84/perfect-scrollbar。
简介
@daawid84/perfect-scrollbar 是一款简单、轻量级的 JavaScript 插件，专用于自定义滚动条。滚动条的样式和表现力无需使用浏览器默认样式，即可实现“完美滚动”。这个插件只需要极少的调整即可适应任何的 Web 项目。
安装
可以通过 npm 或者 yarn 安装 @daawid84/perfect-scrollbar。
npm install @daawid84/perfect-scrollbar
或者
yarn add @daawid84/perfect-scrollbar
或者你也可以在 HTML 中引入：
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/1.4.0/css/perfect-scrollbar.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/1.4.0/perfect-scrollbar.min.js" type="text/javascript" ></script>
在项目中使用
在 HTML 中准备好一个容器，比如以下 HTML 代码中的 <div>：
<div id="scrollbar-container">
<div id="content">
<!-- your content here -->
</div>
</div>然后，你可以在你的 JavaScript 中使用它：
import PerfectScrollbar from "@daawid84/perfect-scrollbar";
const container = document.getElementById("scrollbar-container");
const scrollbar = new PerfectScrollbar(container);好了，现在你应该可以玩一下了，在浏览器中看看，它的默认效果应该是这样的：
自定义配置
你可以为 PerfectScrollbar 传递一个 options 对象来配置你的自定义设置，这样你就可以为你的滚动条添加样式了。
比如，以下是常用的几个配置项目：
const scrollbar = new PerfectScrollbar(container, {
wheelPropagation: true, // 鼠标滚轮事件是否可以传递到父级容器
minScrollbarLength: 20, // 最小滚动条长度
suppressScrollY: true, // 禁用垂直方向滚动
suppressScrollX: false, // 启用水平方向滚动
useBothWheelAxes: false, // 鼠标滚轮是否同时滚动水平和垂直方向
});你可以详细查看 options 的对象及其可用属性，以获取更多有关如何自定义配置的信息。
示例代码
以下是一个完整的使用示例。
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
----- --------------- ---------------------------- ---------------- --
-----
----------------
----------------------------------------------------------------------------------------------------
--
------------------------ ------------
-------
-------- -
------ ------
------- ------
----------- --------
-------- -----
-
-- -------- --------------------- ------ --
----------- -
----------------- -----
-
------------ -
----------------- -----
-
--------
-------
------
---- -------------------------
---- -------------
----- ----- ----- --- ----- ----------- ---------- ----- ---- -------- ---
--- -- --------- ---- --------- -- ----- -- --------- ------------ -----
------- ------- - ------- --- --------- --- ------- ---- --- ----
------------ --------- ----- --- ------- ----- ------ -------- ----- ---
----- ------- ---- --------- ------ ------ --- --------- ----- -- ------
--------- -- ------ ------- ------ -- -------- --- --- -- ------ -----
--------- ----- ------ - ----- -- --------- ----- --------- ---------
------ -- ----- ---- ------- ----
------
------
-------
----------------------------------------------------------------------------------------------
----------------------
----------
------- -----------------------
------ ---------------- ---- ------------------------------
----- --------- - -----------------------------------------------
----- --------- - --- --------------------------- -
----------------- -----
------------------- ---
---
---------
-------
-------在以上代码中，我们首先给 HTML 添加了一个带有 ID 为 scrollbar-container 的父级容器。接下来，我们给它添加了一个带有 ID 为 content 的子级容器，作为实际内容的承载者。
然后，我们引用了并在页面中添加了 PerfectScrollbar 的 CSS 和 JavaScript，以及我们所采取的一些自定义 CSS 样式。
最后，我们在 JavaScript 中使用了 PerfectScrollbar 对象，并将其赋值给 scrollbar 变量。在此过程中我们也可以选择自定义配置进行个性化的滚动条设置，一旦完成了初始化，你就完成了一个自定义的可缩放滚动条。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e981e8991b448d7904