今天给各位前端同学分享一个css滚动条滑动时才显示的方法，直接上代码：
.list {
/*默认显示滚动条，设置为白色看不出来*/
overflow: scroll;
height: 500px;
}
.list::-webkit-scrollbar {
width: 10px;
background-color: #fff;
}
.list:hover ::-webkit-scrollbar-track-piece {
/*鼠标移动上去再显示滚动条*/
background-color: #fff;
/* 滚动条的背景颜色 */
border-radius: 6px;
/* 滚动条的圆角宽度 */
}
.list:hover::-webkit-scrollbar-thumb:hover {
background-color: #c0cecc;
}
.list:hover::-webkit-scrollbar-thumb:vertical {
background-color: #c0cedc;
border-radius: 6px;
outline: 2px solid #fff;
outline-offset: -2px;
border: 2px solid #fff;
}
好啦，同学们学会了吗，更多关于css内容干货可关注慕课网~