CSS 自定义浏览器滚动条样式

今天访问憧憬博客时，发现他网站的浏览器默认侧边滚动条被修改成了自定义样式。后来上网查询了一下，得知该样式可以通过 CSS 来设计。于是我自己捣鼓了一下，顺便把 CSS 代码借了过来，本站已经用上了，效果大家可以自己看看。

注意：

该样式仅限于 Chromium 内核的浏览器，比如谷歌浏览器、QQ 浏览器、360 浏览器等。非 Chromium 内核的浏览器则不会显示样式，例如火狐浏览器、欧朋浏览器等。

CSS代码

属性说明

::-webkit-scrollbar               /* 滚动条整体部分 */
::-webkit-scrollbar-button        /* 滚动条两端的按钮 */
::-webkit-scrollbar-track         /* 外层轨道 */
::-webkit-scrollbar-track-piece   /* 内层轨道滚动条中间部分 */
::-webkit-scrollbar-thumb         /* 滚动条里面可以拖动的部分 */
::-webkit-scrollbar-corner        /* 边角 */
::-webkit-resizer                 /* 定义右下角拖动块的样式 */

示例代码

下面是本站使用的 CSS 样式，大家可以根据需要自行修改

/* 滚动条默认显示样式 */
::-webkit-scrollbar-thumb {
   background-color: #03a9f4;
   height: 50px;
   outline-offset: -2px;
   outline: 2px solid #cddc39;
   -webkit-border-radius: 4px;
   border: 2px solid #fff;
}

/* 鼠标悬停滚动条样式 */
::-webkit-scrollbar-thumb:hover {
   background-color: #00bcd4;
   height: 50px;
   -webkit-border-radius: 4px;
}

/* 滚动条宽度与高度 */
::-webkit-scrollbar {
   width: 10px;
   height: 10px;
}

/* 滚动框背景样式 */
::-webkit-scrollbar-track-piece {
   background-color: #fff;
   -webkit-border-radius: 0;
}