很多网站你都会发现许许多多精美的滚动条，简洁的、华丽的甚至是动态的也有！各种方法可以实现~
想要如何实现这样的效果呢？其实不会很难，照着我的做试试吧。简单的加入几段 CSS 即可实现！
找到了好几种，在不同网站中搜索到的。如果是您原创的代码望留言批注，我会及时注明来源。
1.小蒋博客自用的忘记从哪里扒来的滚动条：
这个是小蒋用的，自己复制代码到 style.css 里面最底部吧。普通网页也可以放在他的 CSS 中。
::-webkit-scrollbar {
height:8px;
width:8px
}
::-webkit-scrollbar-button {
height:0;
width:0
}
::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment {
display:block
}
::-webkit-scrollbar-button:vertical:start:increment,::-webkit-scrollbar-button:vertical:end:decrement {
display:none
}
::-webkit-scrollbar-track:vertical,::-webkit-scrollbar-track:horizontal,::-webkit-scrollbar-thumb:vertical,::-webkit-scrollbar-thumb:horizontal,::-webkit-scrollbar-track:vertical,::-webkit-scrollbar-track:horizontal,::-webkit-scrollbar-thumb:vertical,::-webkit-scrollbar-thumb:horizontal {
border-style:solid;
border-color:transparent
}
::-webkit-scrollbar-track:vertical::-webkit-scrollbar-track:horizontal{
background-clip:padding-box;
background-color:#fff;
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07);
background-clip:padding-box;
background-color:rgba(0,0,0,.2);
min-height:28px;
padding-top:100
}
::-webkit-scrollbar-thumb:hover {
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,.25);
background-color:rgba(0,0,0,.4)
}
::-webkit-scrollbar-thumb:active {
-webkit-box-shadow:inset 1px 1px 3px rgba(0,0,0,.35);
background-color:rgba(0,0,0,.5)
}
::-webkit-scrollbar-track:vertical,::-webkit-scrollbar-track:horizontal,::-webkit-scrollbar-thumb:vertical,::-webkit-scrollbar-thumb:horizontal {
border-width:0;
}
::-webkit-scrollbar-track:hover {
-webkit-box-shadow:inset 1px 0 0 rgba(0,0,0,.1);
background-color:rgba(0,0,0,.05)
}
::-webkit-scrollbar-track:active {
-webkit-box-shadow:inset 1px 0 0 rgba(0,0,0,.14),inset -1px -1px 0 rgba(0,0,0,.07);
background-color:rgba(0,0,0,.05)
}
滚动条小图片示范：
2.和第一个色调类似但是更简单的滚动条：
同样的方法处理这个滚动条，加到 Style.css 你懂的。
::-webkit-scrollbar{
width:12px;
height:12px;
}
::-webkit-scrollbar-button{}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment{
width:0;
height:0;
}
::-webkit-scrollbar-track-piece{
background-clip:padding-box;
background-color:whitesmoke;
border:solid white;
}
::-webkit-scrollbar-track-piece:vertical{
box-shadow:inset 1px 0 0 rgba(0,0,0,.14),inset -1px 0 0 rgba(0,0,0,.05);
border-width:0;
}
::-webkit-scrollbar-track-piece:horizontal{
box-shadow:inset 0 1px 0 rgba(0,0,0,.14),inset 0 -1px 0 rgba(0,0,0,.05);
border-width:0;
}
::-webkit-scrollbar-thumb{
background-color:rgba(0,0,0,.2);
background-clip:padding-box;
border:solid transparent;
}
::-webkit-scrollbar-thumb:vertical{
border-width:1px 1px 1px 2px;
min-height:24px;
box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.1);
}
::-webkit-scrollbar-thumb:horizontal{
border-width:2px 1px 1px 1px;
min-width:24px;
box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.1);
}
::-webkit-scrollbar-thumb:vertical:hover{
background-color:rgba(0,0,0,.6);
box-shadow:inset 1px 1px 0 rgba(0,0,0,.5),inset 0 -1px 0 rgba(0,0,0,.3);
}
::-webkit-scrollbar-thumb:horizontal:hover{
background-color:rgba(0,0,0,.6);
box-shadow:inset 1px 1px 0 rgba(0,0,0,.5),inset -1px 0 0 rgba(0,0,0,.3);
}
滚动条小图片示范：
三、椭圆的 CSS 滚动条：
强烈推荐而且显示效果不错，但是可能有点占位置了。
html {
overflow: auto;
}
body {
position: absolute;
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
padding: 30px;
overflow-y: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
滚动条小图片示范：
4.类似Qi博客的
::-webkit-scrollbar-track-piece{
background-color:#f5f5f5;
border-left:1px solid #d2d2d2;
}
::-webkit-scrollbar{
width:13px;
height:13px;
}
::-webkit-scrollbar-thumb{
background-color:#c2c2c2;
background-clip:padding-box;
border:1px solid #979797;
min-height:28px
}
::-webkit-scrollbar-thumb:hover{
border:1px solid #636363;
background-color:#929292;
}
滚动条小图片示范：
5.同样漂亮的椭圆滚动条
::-webkit-scrollbar-track{
border-radius:4px;
}
::-webkit-scrollbar-track-piece{
-webkit-border-radius:4px;
}
::-webkit-scrollbar-track-piece:hover{
}
::-webkit-scrollbar{
width:10px;
height:10px;
border-radius:0px;
background-color:#F1F1F1;
}
::-webkit-scrollbar:hover{
background:#DCE1E4;
}
::-webkit-scrollbar-thumb{
background-color:#C1C8CC;
border:solid 1px #B5BBBF;
border-radius:4px;
}
::-webkit-scrollbar-thumb:hover{
background-color:#6C7073;
border-color:#5F6366;
}
::-webkit-scrollbar-arrow {
color:#F00;
background:#0F0;
}
::-webkit-scrollbar-button{
display:block;
width:10px;
height:10px;
border-radius:4px;
border:1px solid #B5BBBF;
display:none;
}
::-webkit-scrollbar-button:hover{
border-color:#5F6366;
}
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement {
display:none;
}
截图：
小结
好吧，我承认这篇文章前三个是从小蒋那里弄来的。。。。。
