滚动条样式优化(CSS3自定义滚动条样式 -webkit-scrollbar)

有时候觉得浏览器自带的原始滚动条不是很美观，那webkit浏览器是如何自定义滚动条的呢？

Webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式。当然，兼容所有浏览器的滚动条样式目前是不存在的。

::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动条里面的小方块，能上下左右移动(取决于是垂直还是水平)
::-webkit-scrollbar-track 滚动条的轨道(里面装有thumb)
::-webkit-scrollbar-button 滚动条轨道两端的按钮，允许通过点击微调小方块的位置
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分(除去)
::-webkit-scrollbar-corner 边角，及两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于拖动调整元素大小的小控件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scrollbar</title>
</head>
<style type="text/css">

.scrollbar1{
margin:20px auto;
width:200px;
height:100px;
overflow: auto;
}

.scrollbar2{
margin:20px auto;
width:200px;
height:100px;
overflow: auto;
}

/*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/
.scrollbar1::-webkit-scrollbar{
width:16px;
height:16px;
background-color:#f5f5f5;
}
/*定义滚动条的轨道,内阴影及圆角*/
.scrollbar1::-webkit-scrollbar-track{
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
border-radius:10px;
background-color:#f5f5f5;
}
/*定义滑块,内阴影及圆角*/
.scrollbar1::-webkit-scrollbar-thumb{
height:20px;
border-radius:10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color:#555;
}

// scrollbar

.scrollbar2::-webkit-scrollbar-corner {
background-color: transparent;
}

.scrollbar2::-webkit-scrollbar-button {
width: 0;
height: 0;
display: none;
}

.scrollbar2::-webkit-scrollbar-thumb {
width: 7px;
background-color: #b4babf;
border-radius: 7px;
}

.scrollbar2::-webkit-scrollbar {
width: 7px;
height: 7px;
}

.scrollbar2::-webkit-scrollbar-track {
width: 15px;
}

.scrollbar2::-webkit-scrollbar:hover {
background-color: transparent;
}
.btns{
width: 400px;
height: 50px;
text-align: center;
margin:100px auto 0 auto;
}
button
{
text-decoration:none;
background:#47B2EA;
color:#f2f2f2;

padding: 10px 30px 10px 30px;
font-size:16px;
font-family: 微软雅黑,宋体,Arial,Helvetica,Verdana,sans-serif;
font-weight:bold;
border-radius:3px;

-webkit-transition:all linear 0.30s;
-moz-transition:all linear 0.30s;
transition:all linear 0.30s;
}
button:hover{
cursor: pointer;
opacity: 0.8;
}
</style>

<body>
<div class="btns">
<button class="one">样式1</button>
<button class="two">样式2</button>
</div>
<div id='show' class="scrollbar1">番茄工作法是弗朗西斯科·西里洛于1992年创立的一种相对于GTD更微观的时间管理方法。使用番茄工作法，选择一个待完成的任务，将番茄时间设为25分钟，专注工作，中途不允许做任何与该任务无关的事，直到番茄时钟响起，然后在纸上画一个X短暂休息一下（5分钟就行），每4个番茄时段多休息一会儿。</div>
<script>
var show=document.querySelector("#show")
var one=document.querySelector(".one")
var two=document.querySelector(".two")
one.onclick=function(){
show.className="scrollbar1"
}
two.onclick=function(){
show.className="scrollbar2"
}
</script>
</body>
</html>

导航条优化

div {
    background: #2b2e37;
    height: 200px;
    position: relative
    background:url('bg.jpg')
}
div:before {
    background:url('bg.jpg')
    content: "";
    width: 100%;
    height: 40px;
    position: absolute;
    top: 0;
    bottom: 0;
    background: #2b2e37;
    filter: blur(10px);
    z-index: 0;
}