首页 > 其他 > 详细

自定义滚动条样式

时间:2020-10-21 18:00:16      阅读:31      评论:0      收藏:0      [点我收藏+]

自定义滚动条样式(google):

/*自定义滚动条样式代码google*/
*::-webkit-scrollbar{
    width:5px;
    height:5px;
}
*::-webkit-scrollbar-track{
    background: #f7f7f7;
    border-radius:2px;
}
*::-webkit-scrollbar-thumb{
    background: #eee;
    border-radius:5px;
}

body::-webkit-scrollbar{
    width:10px;
}
body::-webkit-scrollbar-thumb{
    background: #b3b2be;
    border-radius:5px;
}
div::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: initial;
}

div::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(127,135,146,.5);
}

div::-webkit-scrollbar-track {
    width: 10px;
    box-shadow: none;
    border-radius: 0;
    background-color: initial;
}

firefox 自定义滚动条样式

/*firedox滚动条样式*/
*{
    scrollbar-width: thin;
    scrollbar-color: #eee #f7f7f7;
}
html{
    scrollbar-width: thin;
    scrollbar-color: #eee #f7f7f7;
}

自定义滚动条样式

原文:https://www.cnblogs.com/zzyxx/p/13853271.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!