css滚动条滑动时才显示，轻松实现

本文主要是介绍css滚动条滑动时才显示，轻松实现，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

今天给各位前端同学分享一个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内容干货可关注慕课网~

这篇关于css滚动条滑动时才显示，轻松实现的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

CSS教程