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

CSS控制滚动条样式/*作为IT界最前端的技术达⼈，页⾯上的每⼀个元素的样式我们都必须较真，就是滚动条我们也不会忽略。下⾯我给⼤家分享⼀下如何通过CSS来控制滚动条的样式，代码如下：*/ 1 /*定义滚动条轨道*/ 2 #style-2::-webkit-scrollbar-track 3 { 4 background-color: #F5F5F5; 5 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22); 6 } 7 /*定义滚动条⾼宽及背景*/ 8 #style-2::-webkit-scrollbar 9 {10 width: 10px;11 background-color: rgba(0, 0, 0, 0.34);12 }13 /*定义滚动条*/14 #style-2::-webkit-scrollbar-thumb15 {16 background-color: #8b8b8b;17 border-radius: 10px;18 }*要实现单个div⾥⾯的内容滚动，需要满⾜三个条件：1、div必须设定固定的⾼度，不能使⽤百分⽐或 auto 等弹性值。2、其中的内容⾼度必须超过它本⾝的⾼度。3、必须添加属性 “overflow：auto”。

*隐藏滚动条：1、去掉⽔平⽅向的滚动条：2、去掉垂直⽅向的滚动条：3、隐藏横向、显⽰纵向滚动条：4、隐藏全部滚动条：或者更好的⽅法就是把滚动条的颜⾊设置为完全透明，这样既可以实现内容的滚动，⼜达到不显⽰滚动条的⽬的。应⽤:没有⽔平滚动条:

test
没有垂直滚动条

test
没有滚动条

test
⾃动显⽰滚动条
test
⾃⼰定义滚动条的颜⾊，代码如下： 1 Body { 2 scrollbar-arrow-color: #f4ae21; /*三⾓箭头的颜⾊*/ 3 scrollbar-face-color: #333; /*⽴体滚动条的颜⾊*/ 4 scrollbar-3dlight-color: #666; /*⽴体滚动条亮边的颜⾊*/ 7 scrollbar-highlight-color: #666; /*滚动条空⽩部分的颜⾊*/10 scrollbar-shadow-color: #999; /*⽴体滚动条阴影的颜⾊*/13 scrollbar-darkshadow-color: #666; /*⽴体滚动条强阴影的颜⾊*/16 scrollbar-track-color: #666; /*⽴体滚动条背景颜⾊*/18 scrollbar-base-color:#f8f8f8; /*滚动条的基本颜⾊*/19 Cursor:url(); /*⾃定义个性⿏标*/20 }以上2项适⽤与、
、