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内容干货可关注慕课网~