继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

幕布斯7119047
关注TA
已关注
手记 432
粉丝 28
获赞 102

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


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP