前言
在现代化的 Web 应用中，滚动条已经成为了必不可少的元素。然而，原生滚动条的样式与美观程度却不能满足现代用户的审美及使用习惯。这时候，一个好用的滚动条插件便派上了用场。而今天主要要介绍的正是这样一款插件：@dawid84/perfect-scrollbar。
简介
@daawid84/perfect-scrollbar 是一款简单、轻量级的 JavaScript 插件，专用于自定义滚动条。滚动条的样式和表现力无需使用浏览器默认样式，即可实现“完美滚动”。这个插件只需要极少的调整即可适应任何的 Web 项目。
安装
可以通过 npm 或者 yarn 安装 @daawid84/perfect-scrollbar。
--- ------- ---------------------------
或者
---- --- ---------------------------
或者你也可以在 HTML 中引入：
----- ---------------- ---------------------------------------------------------------------------------------------------- -- ------- ---------------------------------------------------------------------------------------------- ---------------------- ----------
在项目中使用
在 HTML 中准备好一个容器，比如以下 HTML 代码中的 <div>：
---- -------------------------
---- -------------
---- ---- ------- ---- ---
------
------然后，你可以在你的 JavaScript 中使用它：
------ ---------------- ---- ------------------------------ ----- --------- - ----------------------------------------------- ----- --------- - --- ----------------------------
好了，现在你应该可以玩一下了，在浏览器中看看，它的默认效果应该是这样的：
自定义配置
你可以为 PerfectScrollbar 传递一个 options 对象来配置你的自定义设置，这样你就可以为你的滚动条添加样式了。
比如，以下是常用的几个配置项目：
----- --------- - --- --------------------------- - ----------------- ----- -- ----------------- ------------------- --- -- ------- ---------------- ----- -- -------- ---------------- ------ -- -------- ----------------- ------ -- ----------------- ---
你可以详细查看 options 的对象及其可用属性，以获取更多有关如何自定义配置的信息。
示例代码
以下是一个完整的使用示例。
--------- -----
------
------
----- --------------- --
----- --------------- ---------------------------- ---------------- --
-----
----------------
----------------------------------------------------------------------------------------------------
--
------------------------ ------------
-------
-------- -
------ ------
------- ------
----------- --------
-------- -----
-
-- -------- --------------------- ------ --
----------- -
----------------- -----
-
------------ -
----------------- -----
-
--------
-------
------
---- -------------------------
---- -------------
----- ----- ----- --- ----- ----------- ---------- ----- ---- -------- ---
--- -- --------- ---- --------- -- ----- -- --------- ------------ -----
------- ------- - ------- --- --------- --- ------- ---- --- ----
------------ --------- ----- --- ------- ----- ------ -------- ----- ---
----- ------- ---- --------- ------ ------ --- --------- ----- -- ------
--------- -- ------ ------- ------ -- -------- --- --- -- ------ -----
--------- ----- ------ - ----- -- --------- ----- --------- ---------
------ -- ----- ---- ------- ----
------
------
-------
----------------------------------------------------------------------------------------------
----------------------
----------
------- -----------------------
------ ---------------- ---- ------------------------------
----- --------- - -----------------------------------------------
----- --------- - --- --------------------------- -
----------------- -----
------------------- ---
---
---------
-------
-------在以上代码中，我们首先给 HTML 添加了一个带有 ID 为 scrollbar-container 的父级容器。接下来，我们给它添加了一个带有 ID 为 content 的子级容器，作为实际内容的承载者。
然后，我们引用了并在页面中添加了 PerfectScrollbar 的 CSS 和 JavaScript，以及我们所采取的一些自定义 CSS 样式。
最后，我们在 JavaScript 中使用了 PerfectScrollbar 对象，并将其赋值给 scrollbar 变量。在此过程中我们也可以选择自定义配置进行个性化的滚动条设置，一旦完成了初始化，你就完成了一个自定义的可缩放滚动条。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600559e981e8991b448d7904