::-webkit-scrollbar {
width: 10px; /*y轴上的滚动条宽度*/
height: 10px;/*x轴上滚动条高度*/
}
::-webkit-scrollbar-track {
border-radius: 3px; /*滚动条的背景区域的圆角*/
background-color: #fdf8f5; /*滚动条的背景颜色*/
}
::-webkit-scrollbar-thumb {
border-radius: 3px; /*滚动条的圆角*/
background-color: #ccc; /*滚动条的背景颜色*/
}
::-webkit-scrollbar-thumb:hover {
background-color: rgb(46, 86, 159);
}
::-webkit-scrollbar-thumb:active {
background-color: rgb(46, 86, 159);
cursor: pointer;
}
不想要滚动条,那么宽高设置为0就好了:
::-webkit-scrollbar {
width: 0px;
height: 0px;
}
/* 滚动条的滑块 */
::-webkit-scrollbar-thumb {
background-color: #a1a3a9;
border-radius: 3px;
}
局部的样式修改(可以是div):
.div-class::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/* 滚动条的滑块 */
.div-class ::-webkit-scrollbar-thumb {
background-color: #a1a3a9;
border-radius: 3px;
}