CSS3或CSS+JS实现改变滚动条样式(兼容所有浏览器)

2023年6月20日发(作者：)

CSS3或CSS+JS实现改变滚动条样式（兼容所有浏览器）/*定义滚动条⾼宽及背景 ⾼宽分别对应横竖滚动条的尺⼨*/

::-webkit-scrollbar

{

width: 16px; /*滚动条宽度*/ height: 16px; /*滚动条⾼度*/}

/*定义滚动条轨道 内阴影+圆⾓*/

::-webkit-scrollbar-track

{

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

border-radius: 10px; /*滚动条的背景区域的圆⾓*/ background-color: red;/*滚动条的背景颜⾊*/

}

/*定义滑块 内阴影+圆⾓*/

::-webkit-scrollbar-thumb

{

border-radius: 10px; /*滚动条的圆⾓*/ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);

background-color: green; /*滚动条的背景颜⾊*/}

::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-thumb 滚动条⾥⾯的⼩⽅块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是⽔平滚动条）::-webkit-scrollbar-track 滚动条的轨道（⾥⾯装有Thumb）::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调⼩⽅块的位置。::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）::-webkit-scrollbar-corner 边⾓，即两个滚动条的交汇处::-webkit-resizer 两个滚动条的交汇处上⽤于通过拖动调整元素⼤⼩的⼩控件　　想给单个节点设置滚动条，即在上⾯的伪类前⾯加上 ID/样式名字：例如：

.scroll_style::-webkit-scrollbar

{

width: 16px; /*滚动条宽度*/ height: 16px; /*滚动条⾼度*/}

详细信息请参考 /hanshileiai/article/details/40398177上述样式是指针对⾕歌浏览器⽣效的。（不兼容⽕狐，IE）IE 的写法和上⾯不太⼀样1. scrollbar-arrow-color: color; /*三⾓箭头的颜⾊*/2. scrollbar-face-color: color; /*⽴体滚动条的颜⾊（包括箭头部分的背景⾊）*/3. scrollbar-3dlight-color: color; /*⽴体滚动条亮边的颜⾊*/4. scrollbar-highlight-color: color; /*滚动条的⾼亮颜⾊（左阴影？）*/5. scrollbar-shadow-color: color; /*⽴体滚动条阴影的颜⾊*/6. scrollbar-darkshadow-color: color; /*⽴体滚动条外阴影的颜⾊*/7. scrollbar-track-color: color; /*⽴体滚动条背景颜⾊*/8. scrollbar-base-color:color; /*滚动条的基⾊*/ 令⼈遗憾的是 ⽕狐⽬前还没有修改滚动条样式的 CSS⽀持 不过我们可以利⽤插件，⽐较好的插件有

使⽤⽅法如下：

其中 + + + + 这5个必须引⼊。注意引⼊顺序令⼈遗憾的⼈，滚动条的样式不可以配置，需要⼿动写⼊样式(我也是醉了)如果页⾯上有需要配置的多个滚动条._mCS_1 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ /* 1st scrollbar */}._mCS_2 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ /* 2nd scrollbar */}._mCS_3 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ /* 3rd scrollbar */}上⾯的代码可以这样理解 mCSB_dragger 下⾯的 mCSB_dragger_bar 当然你对这个层级有点懵逼。还好官⽅有个图⽚指⽰对应的结构根据这张图⽚，就可以很容易的定义滚动条的样式了。

._mCS_1 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background:red; width:10px;}._mCS_1 .mCSB_scrollTools .mCSB_draggerRail{ /*这个就对应图⽚修改滚动条的背景⾊*/

background:blue; width:5px;}修改样式 就对应上⾯的图⽚ 看他们的层级和名字 修改对应的样式即可

2023年6月20日发(作者：)

CSS3或CSS+JS实现改变滚动条样式（兼容所有浏览器）/*定义滚动条⾼宽及背景 ⾼宽分别对应横竖滚动条的尺⼨*/

::-webkit-scrollbar

{

width: 16px; /*滚动条宽度*/ height: 16px; /*滚动条⾼度*/}

/*定义滚动条轨道 内阴影+圆⾓*/

::-webkit-scrollbar-track

{

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

border-radius: 10px; /*滚动条的背景区域的圆⾓*/ background-color: red;/*滚动条的背景颜⾊*/

}

/*定义滑块 内阴影+圆⾓*/

::-webkit-scrollbar-thumb

{

border-radius: 10px; /*滚动条的圆⾓*/ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);

background-color: green; /*滚动条的背景颜⾊*/}

::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-thumb 滚动条⾥⾯的⼩⽅块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是⽔平滚动条）::-webkit-scrollbar-track 滚动条的轨道（⾥⾯装有Thumb）::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调⼩⽅块的位置。::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）::-webkit-scrollbar-corner 边⾓，即两个滚动条的交汇处::-webkit-resizer 两个滚动条的交汇处上⽤于通过拖动调整元素⼤⼩的⼩控件　　想给单个节点设置滚动条，即在上⾯的伪类前⾯加上 ID/样式名字：例如：

.scroll_style::-webkit-scrollbar

{

width: 16px; /*滚动条宽度*/ height: 16px; /*滚动条⾼度*/}

详细信息请参考 /hanshileiai/article/details/40398177上述样式是指针对⾕歌浏览器⽣效的。（不兼容⽕狐，IE）IE 的写法和上⾯不太⼀样1. scrollbar-arrow-color: color; /*三⾓箭头的颜⾊*/2. scrollbar-face-color: color; /*⽴体滚动条的颜⾊（包括箭头部分的背景⾊）*/3. scrollbar-3dlight-color: color; /*⽴体滚动条亮边的颜⾊*/4. scrollbar-highlight-color: color; /*滚动条的⾼亮颜⾊（左阴影？）*/5. scrollbar-shadow-color: color; /*⽴体滚动条阴影的颜⾊*/6. scrollbar-darkshadow-color: color; /*⽴体滚动条外阴影的颜⾊*/7. scrollbar-track-color: color; /*⽴体滚动条背景颜⾊*/8. scrollbar-base-color:color; /*滚动条的基⾊*/ 令⼈遗憾的是 ⽕狐⽬前还没有修改滚动条样式的 CSS⽀持 不过我们可以利⽤插件，⽐较好的插件有

使⽤⽅法如下：

其中 + + + + 这5个必须引⼊。注意引⼊顺序令⼈遗憾的⼈，滚动条的样式不可以配置，需要⼿动写⼊样式(我也是醉了)如果页⾯上有需要配置的多个滚动条._mCS_1 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ /* 1st scrollbar */}._mCS_2 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ /* 2nd scrollbar */}._mCS_3 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ /* 3rd scrollbar */}上⾯的代码可以这样理解 mCSB_dragger 下⾯的 mCSB_dragger_bar 当然你对这个层级有点懵逼。还好官⽅有个图⽚指⽰对应的结构根据这张图⽚，就可以很容易的定义滚动条的样式了。

._mCS_1 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background:red; width:10px;}._mCS_1 .mCSB_scrollTools .mCSB_draggerRail{ /*这个就对应图⽚修改滚动条的背景⾊*/

background:blue; width:5px;}修改样式 就对应上⾯的图⽚ 看他们的层级和名字 修改对应的样式即可