项目需求
最近做一个需求，需要修改浏览器滚动条样式，包含整个滚动条、轨道、滑块等等。
这种需求其实挺常见的，因为默认浏览器滚动条样式确实丑，而且不同浏览器、不同电脑的滚动条样式还不一致，确实需要统一，比较好看一点。
因为是在 electron 项目中配置，不需要考虑其他浏览器的兼容。
整体需要实现的效果如图所示（正常应该是竖着的，但是太占位置了，将图片调整为横着的）：
滚动条轨道是渐变的、立体的，可以使用linear-gradient和background-image实现
滚动条滑块也是立体按钮，需要特殊配置
基础介绍
Electron应用程序运行在Chromium内核之上，不需要直接面对浏览器兼容性问题，这为滚动条样式的定制提供了便利。
- ::-webkit-scrollbar：整个滚动条的样式。
- ::-webkit-scrollbar-track：滚动条轨道的样式。
- ::-webkit-scrollbar-thumb：滚动条滑块（拖动部分）的样式。
- ::-webkit-scrollbar-button：滚动条两端的按钮，用于快速滚动。
- ::-webkit-scrollbar-corner：当同时有水平和垂直滚动条时，它们相交处的样式。
- ::-webkit-scrollbar-track-piece：轨道的两部分，一部分始终可见，另一部分只在滑块上方或下方可见。
- ::-webkit-resizer：用于调整元素大小的小控件，通常出现在元素的角落。
需求实现
- 整个滚动条：控制整体宽度
横向滚动条时，通过 width 控制滚动条宽度；
纵向滚动条时，通过 height 控制滚动条宽度。
::-webkit-scrollbar {
width: 12px;
/* height: 12px; */
}
- 滚动条轨道：
可以直接用背景图片
::-webkit-scrollbar-track {
/* background-color: rgba(0, 0, 0, 0.05); // 轨道颜色 */
background: url("../img/ic_scroll_track.png") 0 0 / 100% 100% no-repeat;
}
- 滚动条滑块：背景颜色、滑块颜色、滑块大小等。也可以应用渐变色或背景图片
::-webkit-scrollbar-thumb {
border-radius: 6px;
background-color: rgba(230, 159, 184, 1); /* 设置背景色 */
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.25); /* 添加阴影效果 */
}
通过上述方式设置，发现滚动条高度无法调整，网上找了各种解决方案，如 height、-webkit-scrollbar-height 等，配置后均没有用。而且滚动条滑块的宽度无法超过滚动条宽度的。
配置效果如下所示：
对于::-webkit-scrollbar-thumb 的高度设置不起作用的问题，这实际上是一个常见的误解。在 Webkit 内核的浏览器中，::-webkit-scrollbar-thumb 的height属性并不直接控制滚动条滑块的高度，而是由内容区域的高度和::-webkit-scrollbar的宽度间接决定的。滑块的高度会自适应内容区域的滚动范围，而不是通过直接设置一个固定高度来改变。
所以，如果希望改变滚动条滑块的外观，主要是改变其视觉上的大小，还是可以的。
整体滑块宽度还是上面的高度，但是可以将其调整为透明的，只展示顶部背景图片，基本满足要求了。
但是也有缺点，视觉上滑块是很小，但是滚动时看不到滑到底部的情况，因为下面其实还是有东西的，只是透明了。（当然，如果能接受这个缺点，也是可以使用的）
::-webkit-scrollbar-thumb {
border-radius: 6px;
// background-color: rgba(230, 159, 184, 1);
// -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.25);
background-image: url("../img/ic_scroll_thumb.png"); // 设置背景图 在滑块的顶部
background-size: contain;
background-repeat: no-repeat;
background-position: top;
}
配置效果如下所示：
整个滑块+背景（滑块整体背景色显示出来）
只显示滑块顶部背景图（主要显示背景，其他部分隐藏），大体满足了需求实现的要求，但确实没法完全实现。。。。。。
