html滚动条样式自定义,CSS自定义滚动条样式

今天心情很是不好呐，上午没来上班，钉钉申请通过，人事居然扣除我双倍工资，记过一次。次奥！***屌毛，长话短说，很是郁闷。

-webkit-scrollbar

众所周知，浏览器默认的滚动条样式实在是..不怎么美观，当然，既然不堪入目，那么我们就要去改变它。

css3的强势登场，颠覆了往日js独大浏览器动画 效果 美观 体验等。回到当前，先了解下滚动条。滚动条从外观来看是由两部分组成：1、可以滑动的部分，即为滑块。2、滚动条的轨道，即滑块的轨道，为了明显 美观，通常轨道颜色较浅，突出滑块。

滚动条的样式主要有三部分组成：

1、::-webkit-scrollbar 滚动条整体样式；

2、::-webkit-scrollbar-thumb 滑块部分；

3、::-webkit-scrollbar-thumb 轨道部分；

下面就来看一下代码：

CSS代码：

.box{

width: 150px;

height: 200px;

overflow: scroll;

margin: 100px;

}

.scrollbar{

width: 30px;

height: 300px;

margin: 0 auto;

}

/*滚动条整体样式*/

.box::-webkit-scrollbar {

width: 10px;

height: 1px;

}

/*滚动条滑块*/

.box::-webkit-scrollbar-thumb {

border-radius: 10px;

-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

background: #535353;

}

/*滚动条轨道*/

.box::-webkit-scrollbar-track {

-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);

border-radius: 10px;

background: #ccc;

}

看下效果：

屌爆屌爆

ps：内容小于div高度，滚动条会消失，另外，你也可以根据需求，设计各种各样式的滚动条，还可以使用渐变颜色更甚之图片哦，如果页面有多处滚动条，省略类名 id，全局添加

兼容性：

兼容性

可以看到，兼容性总体来说还不错，移动端的话还是不错的，不久的将来，将会普及大地的

如果非要兼容所有的话，js上场呗，懒得写的话，插件呗☺