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替换，建议用配色图挑选合适的颜色，喜欢的朋友可以动手试试。

相关文章：

相关阅读