小小地记录一下~
效果图
给需要滚动的div设置滚动属性后
.box {
height: 300px;
width: 300px;
overflow-y: auto;
background-color: #f1eee9;
padding: 20px;
}
默认是这样的滚动条
添加以下css代码即可
/* 修改滚动条整体样式 */
::-webkit-scrollbar {
width: 8px;
/* 滚动条宽度 */
background-color: #f1f1f1;
/* 滚动条背景色 */
}
/* 修改滚动条滑块样式 */
::-webkit-scrollbar-thumb {
background-color: #D2D2D2;
/* 滑块颜色 */
border-radius: 4px;
/* 滑块圆角 */
}
/* 修改滚动条轨道样式 */
::-webkit-scrollbar-track {
background-color: #f1f1f1;
/* 轨道背景色 */
}
/* 修改滚动条角落样式 */
::-webkit-scrollbar-corner {
background-color: #f1f1f1;
/* 角落背景色 */
}
如果你觉得滚动条顶部太靠近边缘,可以在::-webkit-scrollbar-track选择器中添加margin属性。这样滚动条距离最上面和最下面都会有一些余地。
/* 修改滚动条轨道样式 */
::-webkit-scrollbar-track {
margin: 5px 0;
}