网站建设常用的利用CSS3对浏览器滚动条美化的教程(简单易用)

2020年07月26日 前端开发 54点热度 0人点赞 0条评论

网站建设时有时候网站的设计和浏览器自带的滚动条的样式或者颜色不是很匹配,所以网站建设时有时候长沙网站建设会用CSS3来美化浏览器自带的滚动条的样式,今天就给大家分享建站我帮您在做网站建设常用的CSS3浏览器滚动条美化教程。

简单的浏览器滚动条美化教程

简单的浏览器滚动条美化教程

浏览器的滚动条我们可以粗略的分成3部分,只要美化好这三部分一般就不会觉得与我们的网站设计有很大的冲突了,这三部分是:滚动条的外层轨道、滚动条滑块、滚动条滑块鼠标移上去的背景,下面是一段利用CSS3美化浏览器滚动条的代码,有需要的朋友可以复制好代码进行简单的修改即可:

/*外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果*/
::-webkit-scrollbar-track {
    width: 5px;
    background-color:#000;
}
/*滚动条的宽度*/
::-webkit-scrollbar {
    width:5px;
    height:5px;
}
/*滚动条的设置*/
::-webkit-scrollbar-thumb {
    background-color:#333;
    background-clip:padding-box;
    min-height:28px;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius:2em;
}
/*滚动条移上去的背景*/
::-webkit-scrollbar-thumb:hover {
    background-color:#fff;
}

某些特定的情况下,我们并不想让浏览器滚动条显示出来,那么这种情况怎么样利用CSS3美化浏览器滚动条呢?其实如果是不想让滚动条显示的情况,处理起来更简单,我们只需要用CSS将滚动条隐藏即可,美化代码如下:

/*外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果*/
::-webkit-scrollbar-track {
    display: none;
    width: 5px;
    background-color:#000;
}
/*滚动条的宽度*/
::-webkit-scrollbar {
    display: none;
    width:5px;
    height:5px;
}

以上就是建站我帮您今天分享给大家的建站教程,希望对大家有帮助。每天进步一点点,日积月累你发现你将变得无比“强大” :mrgreen:

建站我帮您

保持饥渴的专注,追求最佳的品质

文章评论