本文介绍了CSS滚动条选择工具，并演示了如何在demo中在Webkit内核浏览器和IE浏览器中自定义水平滚动条和垂直滚动条。
0 .需求
您可能不想使用浏览器的默认滚动条样式。 因为定制和美观不够。 如何自定义滚动条的样式？ 一起看看吧。
1基础知识
1.1 Webkit内核的css滚动条选择
:-webkit-scrollbar CSS伪类选择器会影响元素滚动条的样式
属性：
:-webkit-scrollbar —整个滚动条
:3360-WebKit-scroll bar-track -滚动条轨道
:-WebKit-scroll bar-thum B-滚动条滚动滑块
:-WebKit-scroll bar-button -滚动条按钮(上下箭头)
:-WebKit-scroll bar-track-piece -滚动条上没有滑块的轨道部分
:-WebKit-scroll bar-corner -拐角，即既有垂直滚动条又有水平滚动条时相交的部分
:-webkit-resizer —某些元素的颜色部分的某些样式。 示例：textarea上的可拖动按钮)
注意：
)1)浏览器支持情况：
:-webkit-scrollbar仅在启用Webkit的浏览器(Chrome，Safari )中可用。
)2)可以设置垂直/水平滚动条
可以设定“水平滚动条”(:horizontal )，而不使用默认的垂直滚动条(:vertical )。
)3)滚动条按钮(:decrement、increment ) ) ) ) ) ) ) )。
可以设定图像。 这用以下的demo表示。
1.2自定义ie滚动条样式
可定制的样式少，只能控制滚动条各部分显示的颜色，定制性低。 在此，尝试了scrollbar-3dlight-color、scrollbar-highlight-color等样式，但没有效果，在此不列举：
scrollbar-arrow-color —滚动条三角箭头颜色scrollbar-face-color —滚动条上滚动滑块的颜色
滚动条颜色-滚动条轨道、按钮背景颜色scrollbar-shadow-color—滚动框上滑块边框的颜色
2.demo快速到手
2.1 Webkit内核浏览器的自定义滚动条样式(chrome，safari ) )。
如果您认为上述说明是抽象的，可以直接在浏览器中打开demo，并结合demo中的注释来理解每个属性的含义。 我在图中标记了几个属性。 滚动条外部的轨道属性未标记在图中。 请打开chrome浏览器控制台以显示属性。
scrollbar的demo--lynnshen * {
margin: 0；
padding: 0；
}
. scolltable {
width: 500px；
高： 300 px；
border : 1px固态黑；
/*实现水平垂直中央*
位置： absolute；
left: 50%；
top: 50%；
玛格琳- left :-250 px；
margin-top: -150px；
Overflow :滚动；
}
. content {
/*设定的比. scolltable稍宽*/
width: 600px；
}
/*整个滚动条*
:-webkit-scrollbar {
width: 24px；
背景色：传输；
}
/*整个水平滚动条*
:-WebKit-scroll bar : horizontal {
height: 24px；
背景色：传输；
}
/*滚动条的轨道*
:3360-WebKit-scroll bar-track {
背景色： # F6 F8 fc；
border-right 33601 px solid # f1 F5 fa；
border: 1px solid #f1f5fa；
；
}
/*垂直滑块*
:-WebKit-scroll bar-thumb {
背景色： rgba (220、228、243、1；
border-radius: 0px；
border-top: 1px solid #edf2f9;
border-bottom: 1px solid #edf2f9;
border-left: 1px solid #f1f5fa;
}
/*水平的滑块*/
::-webkit-scrollbar-thumb:horizontal {
/* background-color: rgba(220, 228, 243, 1); */
border-radius: 0px;
border-top: 1px solid #edf2f9;
/* border-right: 1px solid #f1f5fa;
border-left: 1px solid #f1f5fa; */
}
/*滚动条上的按钮--竖直滚动条向上*/
::-webkit-scrollbar-button:decrement {
border-bottom: 1px solid #edf2f9;
height: 26px;
background: url("./images/scroll_up.png") 7px 9px no-repeat;
border-right: 1px solid #f1f5fa;
border-left: 1px solid #f1f5fa;
}
/*滚动条上的按钮--竖直滚动条向下*/
::-webkit-scrollbar-button:increment {
border-top: 1px solid #edf2f9;
height: 26px;
background: url("./images/scroll_down.png") 7px 10px no-repeat;
border-right: 1px solid #f1f5fa;
border-left: 1px solid #f1f5fa;
border-bottom: 1px solid #f1f5fa;
}
/*滚动条上的按钮--水平滚动条向左*/
::-webkit-scrollbar-button:horizontal:decrement {
border-top: 1px solid #edf2f9;
width: 26px;
background: url("./images/scroll_left.png") 9px 7px no-repeat;
border-top: 1px solid #f1f5fa;
border-bottom: 1px solid #f1f5fa;
border-right:1px solid #f1f5fa;
}
/*滚动条上的按钮--水平滚动条向右*/
::-webkit-scrollbar-button:horizontal:increment {
border-top: 1px solid #edf2f9;
width: 25px;
background: url("./images/scroll_right.png") 10px 7px no-repeat;
border-left:1px solid #f1f5fa;
}
/*边角*/
::-webkit-scrollbar-corner{
border:1px solid #dce4f3;
}
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
实现效果：
WebKit内核的浏览器
说明：
(1)滚动条两端的按钮使用的图片，四个角分别使用了四张图片;
(2).scolltable实现了水平垂直居中的效果，具体方法是：使用绝对对位，将元素的定点定位到body的中心。然后使用负margin(即元素宽高的一半)将其拉回到body的中心。
2.2 IE自定义滚动条样式
scrollbar for IE--lynnshen* {
margin: 0;
padding: 0;
}
.scolltable {
width: 500px;
height: 300px;
border: 1px solid black;
/*实现水平垂直居中*/
position: absolute;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -150px;
overflow: scroll;
scrollbar-face-color:greenyellow;
scrollbar-arrow-color:goldenrod;
scrollbar-shadow-color:red;
scrollbar-track-color:pink;
}
.content {
/*要设的比.scolltable更宽一些*/
width: 600px;
}
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
实现效果：
IE
3.小结
本文主要是想记录下在Webkit内核的浏览器和IE中，如何自定义滚动条的样式，并分别提供了两个demo。如有问题，欢迎指正。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。