CSS3修改滚动条样式

简介

::-webkit-scrollbar是CSS的一个伪类选择器，可以修改了一个元素的滚动条的样式。但根据MDN官方文档的说明，::-webkit-scrollbar仅为草案，还没有成为标准，只有在webkit内核的浏览器中才能使用。

CSS滚动条选择器

你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式:

::-webkit-scrollbar — 整个滚动条.
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
::-webkit-scrollbar-track — 滚动条轨道.
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

滚动条结构组成

其他设置项

已引入以下伪类，并且可以将其应用于伪元素。

:horizontal - 水平伪类适用于任何具有水平方向的滚动条。
:vertical - 垂直伪类适用于任何具有垂直方向的滚动条。
:decrement - 减量伪类适用于按钮和轨道片段。它指示按钮或轨道件在使用时是否会减小视图的位置（例如，在垂直滚动条上向上，在水平滚动条上留下）。
:increment - 增量伪类适用于按钮和轨道片段。它指示按钮或轨道件在使用时是否会增加视图的位置（例如，向下在垂直滚动条上，在水平滚动条上）。
:start - start伪类适用于按钮和轨道片段。它指示对象是否放在拇指之前。
:end - 结束伪类适用于按钮和轨道片段。它指示对象是否放在拇指之后。
:double-button - 双按钮伪类适用于按钮和轨道部分。它用于检测按钮是否是滚动条同一端的一对按钮的一部分。对于轨道件，它指示轨道件是否邻接一对按钮。
:single-button - 单按钮伪类适用于按钮和轨道部分。它用于检测按钮是否单独位于滚动条的末尾。对于轨道件，它指示轨道件是否邻接单个按钮。
:no-button - 适用于跟踪片段并指示轨道片是否运行到滚动条的边缘，即轨道的那一端没有按钮。
:corner-present - 适用于所有滚动条片段并指示是否存在滚动条角。
:window-inactive - 适用于所有滚动条片段并指示包含滚动条的窗口当前是否处于活动状态。

另外:enabled，:disabled，:hover和:active伪类也适用于滚动条片段。

display属性可以设置为none，以隐藏特定的部分。

简单的列子

style:

.content{
    width: 800px;
    height: 800px;
}
/*控制整体*/
.scrollbar-demo::-webkit-scrollbar{
    width: 8px;
    height: 8px;
}
/*控制滑块*/
.scrollbar-demo::-webkit-scrollbar-track{
    background: #ededed;
    border-radius: 4px;
}
/*控制轨道*/
.scrollbar-demo::-webkit-scrollbar-thumb{
    border-radius: 4px;
    background: #b7b7b7;
}
/*控制交汇处*/
.scrollbar-demo::-webkit-scrollbar-corner{
    background: #b7b7b7;
    border-radius: 4px;
}

html:

<div class="scrollbar scrollbar-demo">
    <div class="content">
        测试
    div>
div>

效果：