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

83次阅读

共计 920 个字符，预计需要花费 3 分钟才能阅读完成。

在浏览网页的时候，我们可以看到网页右边会有一个滚动条，这个默认的滚动条是灰色的长条，不少站长为追求个性，通常会修改这个滚动条样式。下面橘子君为大家分享的便是 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 替换，建议用配色图挑选合适的颜色，喜欢的朋友可以动手试试。

正文完