滚动条全局样式修改与局部修改
全局的样式代码:
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/* 滚动条的滑块 */
::-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;
}
假如不想要滚动条,那么宽高设置为0就好了:
::-webkit-scrollbar {
width: 0px;
height: 0px;
}
/* 滚动条的滑块 */
::-webkit-scrollbar-thumb {
background-color: #a1a3a9;
border-radius: 3px;
}
扩展下其他的:
滚动条全局样式:
// 滚动条设置
::-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;
}