CSS滚动条样式设置方法,修改网页默认滚动条

橘子网 2,919 0

在浏览网页的时候,我们可以看到网页右边会有一个滚动条,这个默认的滚动条是灰色的长条,不少站长为追求个性,通常会修改这个滚动条样式。下面橘子君为大家分享的便是CSS滚动条设置方法,因为是通过CSS来修改样式,所以此方法可以通用到其他网站。

CSS滚动条样式设置方法,修改网页默认滚动条

首先了解一下滚动条常用属性

::-webkit-scrollbar :滚动条整体部分,可自定义滚动条的大小等。

::-webkit-scrollbar-track :外层轨道,也可以添加背景图片,颜色改变显示效果。

::-webkit-scrollbar-track-piece :内层轨道,可增加滚动框背景样式。

::-webkit-scrollbar-thumb :滚动条里面可以鼠标点击拖动的那部分。

下面我们来看下CSS滚动条设置的方法,方法很简单,站长只需在网站的CSS文件中添加以下代码,通常是style.css文件。

/*---滚动条默认显示样式--*/  
::-webkit-scrollbar-thumb{  
   background-color:#018EE8;  
   height:50px;  
   outline-offset:-2px;  
   outline:2px solid #fff;  
   -webkit-border-radius:4px;  
   border: 2px solid #fff;  
}
/*---鼠标点击滚动条显示样式--*/  
::-webkit-scrollbar-thumb:hover{  
   background-color:#FB4446;  
   height:50px;  
   -webkit-border-radius:4px;  
}
/*---滚动条大小--*/  
::-webkit-scrollbar{  
   width:8px;  
   height:8px;  
}
/*---滚动框背景样式--*/  
::-webkit-scrollbar-track-piece{  
   background-color:#fff;  
   -webkit-border-radius:0;  
}

在以上CSS滚动条设置样式前,站长可以先做好备份。添加上面的代码后我们会发现滚动条变细,鼠标放上去拖动是红色,平时滚动条的颜色是蓝色的,站长可将颜色#018EE8替换,建议用配色图挑选合适的颜色,喜欢的朋友可以动手试试。

上一篇:

下一篇:

相关阅读

分享