手记

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


0人推荐
随时随地看视频
慕课网APP