自定义浏览器css,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代码(下面是本站的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;

}