如何用CSS修改浏览器滚动条的样式？

在我们自定义滚动条样式之前，我们首先要了解滚动条的结构。 一般来说，滚动条由两部分组成：一部分是滑动部分，我们称之为滑块；另一部分是滑动部分，我们称之为滑块； 另一部分是滚动条的轨迹，也就是滑块的轨迹。 一般来说，为了美观，滑块的颜色比轨道深。

首先介绍一下与滚动条相关的CSS代码及其含义::--:指的是滚动条的整个部分，其属性包括宽度等。

::--- : 指滚动条两侧的按钮。不需要时可以使用:none 隐藏它。

::---轨道：指外轨道部分。 不需要的时候可以用 :none 隐藏它，也可以添加你想要的颜色。

::---track-piece：指内轨部分，即滚动条的中间部分

::---thumb：指滚动条可拖动的部分，即滑块

::--- : 指角部分

::--: 他用来定义右下角滑块的样式

但最常用的是滚动条（--）、滑块（---thumb）和外轨道（---track）的整体部分。

接下来我们隐藏div框多余的部分，给div设置滚动条样式，看看如何使用CSS实现滚动条样式。

HTML部分：

祝你今天过得愉快

祝你今天过得愉快

祝你今天过得愉快

祝你今天过得愉快

祝你今天过得愉快

祝你今天过得愉快

祝你今天过得愉快

祝你今天过得愉快

祝你今天过得愉快

祝你今天过得愉快

祝你今天过得愉快

祝你今天过得愉快

祝你今天过得愉快

祝你今天过得愉快

祝你今天过得愉快

祝你今天过得愉快

祝你今天过得愉快

祝你今天过得愉快

祝你今天过得愉快

祝你今天过得愉快

CSS 部分：.{

:;

：#000；

宽度：200px；

: 300 像素;

： 汽车;

.::-- {

宽度：10px；

: 10 像素;

/*普通滑块样式*/

.::---拇指{

-颜色：rgba(0,0,0,.05);

-：10 像素；

--box-: (0,0,0,.1);

/*鼠标悬停在该类指向的控件上时滑块的样式*/

.:悬停::---拇指{

-颜色：rgba(0,0,0,.2);

-：10 像素；

--box-: (0,0,0,.1);

/*鼠标悬停时滑块的样式*/

.::---拇指:悬停{

-颜色：rgba(0,0,0,.4);

--box-: (0,0,0,.1);

/*平时主要部分*/

。：： - -追踪 {

-：10 像素；

--盒子-: (0,0,0,0);

-白颜色;

/*鼠标悬停时滚动条的主要部分*/

.::---轨道:悬停{

--box-: (0,0,0,.4);

-颜色：rgba(0,0,0,.01);

}渲染：

注意：如果是水平滚动条，则width属性不起作用，可以设置滚动条的高度； 如果是垂直滚动条，那么不起作用，可以用width来设置滚动条的宽度。 您可以根据工作中的需要设置想要的风格。 没有互动过的朋友可以多尝试，加深对知识点的理解。 我希望它可以帮助你！