在前端开发中，实现页面滚动条的定制化需求是不可避免的。npm 包 gemini-scrollbar 便是一款快速实现自定义滚动条的工具。
gemini-scrollbar 简介
gemini-scrollbar 是一款基于原生 JS 的滚动条插件，能快速地实现自定义样式以及滚动事件的定制化需求。它支持手势、鼠标滚轮等多种交互方式，并且可以无缝地在 PC 和移动端上使用。
gemini-scrollbar 安装
首先，我们需要在项目中安装 gemini-scrollbar。在命令行输入以下命令进行安装：
npm install gemini-scrollbar --save
gemini-scrollbar 使用
安装完成之后，我们在代码中引入 gemini-scrollbar 并使用它。下面是一个实现自定义滚动条的示例：
-- -------------------- ---- -------
-------
-------------------- -
------ ------
------- ------
--------- -----
-
-------------- -
--------- ---------
---- --
------ --
------ ----
----------------- -----
-------------- ----
-------- --
-------- ----
----------- ------- ---- ---------
-
-------------------- -
-------- --
-
----------------------- -
--------- ---------
---- --
------ --
------- --
------ ----
-
----------------------- -
--------- ---------
---- --
------ ----
----------------- -----
-------------- ----
-
--------
---- ----------------------------
---- ----------------------------
---- -------------------------------
---- -------------------------------------
------
-------- ----- ----- --- ----- ----------- ---------- ----- --- -- ------- ------ ---------- -- ------ -- ------ ----- ------- -- ---- -- ----- ------- ---- ------- ------------ ------- ------- ---- -- ------- -- -- ------- --------------
------- ---- ----- ----- -- ------------- -- --------- ----- ---- ------ ------ -- ------ ----- --------- --------- ---- -------- --------- --- -------------
------ -- ------------ ---- ----- ---- ----- ----- --- ---------- ----------- ---------- ----------- ----- --- ------------
---------- -- ------ ------ ----- --------- ---- ----- ----- --------- ------------ --- -- ------ ---------
------- --- ---- -- ---- ----------- ---------- ------- -- ---- --- ------ ------ ------- --- ----- --------
------
--------
------ --------------- ---- -------------------
--- --------------- - --- -----------------
-------- -----------------------------------------------
------ --------------------------
------ --------------------------
--------- ----
---
---------在这个示例中，我们首先定义了一个包含自定义滚动条的容器 .my-scroll-container，并使用 CSS 对其进行样式定制。我们在容器内插入了大段的文字，这些文字会在容器内部出现滚动条。
然后我们引入了 gemini-scrollbar，创建了一个新的实例。我们在 element 参数中传入了容器的 DOM 节点，而 track 和 thumb 分别代表滚动轨道和滚动块的选择器。
注意：对于 track 和 thumb 的选择器，它们必须是容器的子元素。
最后，我们开启了滚动条的 autoshow 功能，即当用户需要滚动时，滚动条才会显示出来。
gemini-scrollbar 深度指引
除了示例中的基础使用方法以外，gemini-scrollbar 还支持更加深度和个性化的定制。例如：
1. 轨道内添加外侧阴影效果
我们给 .gemini-scrollbar-track 元素增加一些样式：
.gemini-scrollbar-track {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 8px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}然后 .my-scroll-bar 加个阴影
-- -------------------- ---- -------
-------------- -
--------- ---------
---- --
------ --
------ ----
----------------- -----
-------------- ----
-------- --
-------- ----
----------- ------- ---- ---------
----------- ----- - - --- ------- -- -- -----
-2. 滚动块的宽度定制
我们为 .gemini-scrollbar-thumb 元素添加一个 width 属性：
.gemini-scrollbar-thumb {
position: absolute;
top: 0;
bottom: 0;
width: 16px;
background-color: #666;
border-radius: 5px;
}这样滚动块的宽度就可以更加宽一些。
3. 滚动条位置定制
我们可以使用 JavaScript 控制滚动条的位置，例如模拟点击事件：
let btn = document.querySelector('.btn');
btn.addEventListener('click', function () {
let diff = 50; // 向下滚动 50px
let container = document.querySelector('.my-scroll-container');
container.scrollTop += diff; // 更改容器滚动距离
geminiScrollbar._thumbPosition(); // 重新计算滚动块位置
geminiScrollbar._scrollHandler(); // 触发滚动事件
});在这个示例中，我们在 .btn 元素上监听了点击事件，然后将容器的 scrollTop 属性增加了 50px，实现了向下滚动的效果。最后调用 gemini-scrollbar 的两个方法，重新计算滚动块位置并触发滚动事件。
gemini-scrollbar 总结
通过本篇文章，我们已经了解了如何使用 gemini-scrollbar 实现自定义滚动条的效果，并学会了更加深度和个性化的定制方式。在大型 Web 项目中，使用 gemini-scrollbar 能够帮助我们快速地定制滚动条，让用户获得更好的使用体验，同时也提高了前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaa79b5cbfe1ea06104cf