-webkit-scrollbar：“你要知道美容这个东西，跟鲜花一样需要有绿叶来衬托才会显出她的娇媚。”
——题记，源自《唐伯虎点秋香》
正文
在布局页面样式的时候，可能会遇到显示滚动条的需要，默认滚动条样式普通也不具备自认为的美感，想打造自己的滚动条，咋破？按例我们先上效果图：
效果图
看起来这个效果，是相当简单呀，没啥难度，原始效果是怎样呢？我们也一起来看下：
原始图
效果图与原始图相比，变化的有：上下箭头，滑块样式及轨道。咋变？在这里，我们介绍下scrollbar的朋友：
::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层轨道，即外层轨道除去拖动滑块
::-webkit-scrollbar-thumb 拖动滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式
下面是部分相对应的图例，加深印象：
图例
以及伪元素，其中start与end偶尔可能用得到：
:horizontal
:vertical
:decrement
:increment
:start
:end
:double-button
:single-button
:no-button
:corner-present
:window-inactive
属性视情况而定，一般美化样式
::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-thumb 拖动滑块
这三个够了，基本都可以满足，其他看自己需求。使用前期准备的话，相信应该都知道，需要添加overflow-x/overflow-y/overflow: scroll 及 定高。
示例代码：
.txt-wrap {
width: 25rem;
height: 20rem;
margin: auto;
padding: 10px 20px 10px 20px;
background-color: #fcc;
overflow-y: scroll;
line-height: 30px;
text-align: left;
font-family: 'microsoft yahei';
}
.txt-wrap::-webkit-scrollbar {
width: 10px;
background-color: rgba(213,213,213,.8);
}
.txt-wrap::-webkit-scrollbar-track {
background-color: rgba(213,213,213,.8);
border-radius: .5rem;
}
.txt-wrap::-webkit-scrollbar-thumb {
/*width: 30px;*/
background-color: #969696;
border-radius: .5rem;
}
.txt-wrap::-webkit-scrollbar-button:start {
width: 100%;
height: auto;
background: url(../images/top.png) no-repeat;
background-size: contain;
}
.txt-wrap::-webkit-scrollbar-button:end {
width: 100%;
height: auto;
background: url(../images/down.png) no-repeat;
background-size: contain;
}
scrollbar属性目前并不通用，一般用于webkit较多，移动端可用。
适用
