简介
Simplebar 是一个为网页提供自定义滚动条的 npm 包。在 Web 界面设计中，我们经常需要进行页面滚动操作，但是浏览器原生的滚动条样式可能无法很好地与设计要求相匹配。此时 Simplebar 可以帮助我们实现自定义的滚动条效果。
安装
你可以通过 npm 来安装 Simplebar。
npm install simplebar --save
使用方法
引入 Simplebar
首先，在 HTML 文件中引入 Simplebar 的 CSS 和 JS 文件：
-- -------------------- ---- ------- ------ ----- ---------------- ---------------------------------------------------- -- ------- ------ ---- ------ --- ------- ------------------------------------------------------------ -------
初始化 Simplebar
然后，在需要添加自定义滚动条效果的元素上添加 data-simplebar 属性即可：
<div class="my-scrollable-element" data-simplebar> <!-- 元素内容 --> </div>
你还可以在初始化 Simplebar 时传入一些配置选项：
new SimpleBar(document.querySelector('.my-scrollable-element'), {
autoHide: false,
forceVisible: true,
});这里的选项包括：
autoHide：当设置为true时，滚动条会在用户不操作鼠标时自动隐藏。forceVisible：当设置为true时，滚动条会一直显示，不管元素是否超出了容器尺寸。
在 JavaScript 中操作 Simplebar
你也可以在 JavaScript 中通过 Simplebar 实例来控制滚动条的行为。例如：
-- -------------------- ---- ------- ----- --------- - --- ------------------------------------------------------------ -- ------- -------------------------------------- - ---- -- ------ ------------------------------------------------------- -- -- - ------------------------- ---
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------- ------------
----- ---------------- ---------------------------------------------------- --
-------
-- ----- --
---------------------- -
--------- -----
------- ------
------ ------
-
--------
-------
------
---- ----------------------------- ---------------
-------- ----- ----- --- ----- ----------- ---------- ----- --------- -- ---- -- ---- ------ -------- ---- ------ ----- ------ -- ---- ---- --------- --------- ------- --- -------- -- ----- ---- ---------- ----------- -------- ----- ---- ---------- ----- ------- --- ---- ----- -- ----- --------- ------- ------- ------- ----- - ------ ------------- ---- -------- ----- -------- ----------- -------- ------ ----- -- ------- ---- ------- --- --- -- ------ ---------
------------ --------- ---- --- ---- ----- ------- -------- ---- --- ----- -- ----- ------- --------- ----- ---- ------ ----- - ------- --- ------- ----- ---- ------ --- ------- ----- ------- ----- ------- ------- -- --- -- --------- ------- --------- ----- - ------ --------- ------- ---- --------- ----- ----------- ---- ----- --- ------- -------- ---- ------ ------ ----- --- -------- ------- ----------- -------- ------ ----- ------ -- ------ ---------- -------- --- --------- ----- ---- -------- -------- ------ --- ----- -------- ------ ---- ---- --------- -----------
----------- -------- ---- --- ----- ------- ----- ------ --- ----- ------- --------- ----- --- ----- -------- -- --------- --- --------- ----- -------- ----
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------