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

Mr.小朱同学

已于 2024-11-15 22:05:34 修改

阅读量148

点赞数

分类专栏： Web前端笔记文章标签： css 前端自定义滚动条滚动条样式自定义滚动条样式

于 2024-11-15 21:21:05 首次发布

本文链接：https://blog.csdn.net/qq_39826207/article/details/143807607

版权

Web前端笔记专栏收录该内容

40 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

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;
    /* 鼠标悬浮到