自定义滚动条样式，全局配置CSS样式代码，有需要的直接复制黏贴就可以使用了

目录

1.1、创建style.css样式文件

1.2、main.js引入样式文件

---

今天在做一个前端小项目，想着浏览器自带的滚动条太丑了，于是，就百度了一下，如何自定义浏览器滚动条样式，这篇文章就把自定义滚动条的CSS代码给出来，方便各位直接复制黏贴使用。先来看看自定义滚动条的运行效果，如下所示：

1.1、创建style.css样式文件

我是使用vue3 + vite搭建的一个前端项目，为了让整个项目的滚动条都采用这个自定义的样式，于是我在【src】目录下面，创建了一个style.css样式文件，在文件里面定义了滚动条的CSS样式代码。

/*全局设置滚动条样式*/
:root {
    /* 滚动条宽度 */
    --scrollbar-width: 4px;
    /* 滚动条轨道的背景颜色 */
    --scrollbar-track-color: #f1f1f1;
    /* 滚动条滑块的背景颜色 */
    --scrollbar-thumb-color: #888;
    /* 鼠标悬浮到