13.CSS | scrollbar 滚动条的美容日记

-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较多，移动端可用。

适用

全部频道

13.CSS | scrollbar 滚动条的美容日记

正文