一些爱折腾的个人网站的站长会嫌弃浏览器原始的滚动条不好看,会想方设法的将浏览器的滚动条进行个性化的自定义,而 CSS3 就提供了 -webkit-scrollbar 属性来自定义浏览器滚动条的样式。

CSS3 的 -webkit-scrollbar 属性只支持 webkit 内核浏览器的滚动条设置,它可以对拥有 overflow 隐藏属性的元素区域以及列表框,下拉菜单,textarea元素中的滚动条进行样式的自定义,

滚动条件的组成部份:

下面是滚动条组成部份的显示图:

CSS3自定义滚动条样式

1. ::-webkit-scrollbar 滚动条整体部分

2. ::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或向左向右移动)

3. ::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb)

4. ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,由于通过点击微调小方块的位置。

5. ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分

6. ::-webkit-scrollbar-corner 边角,即垂直滚动条和水平滚动条相交的地方

7. ::-webkit-resizer 两个滚动条的交汇处上用于拖动调整元素大小的小控件

简单的自定义滚动条样式

html完整代码

你可以将下面的代码复制到本地的HTML文件中去

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS3自定义滚动条-飞鸟慕鱼博客</title>
    <style>
    .scrollbar{
        margin-left: 30px;
        float: left;
        height: 300px;
        width: 65px;
        background: #F5F5F5;
        overflow-y: scroll;
        margin-bottom: 25px;
    }
    .force-overflow{
        min-height: 450px;
    }
    #wrapper{
        text-align: center;
        width: 500px;
        margin: auto;
    }
    /*定义滚动条轨道*/
    #style-1::-webkit-scrollbar-track{
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
        background-color: #F5F5F5;
    }
    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    #style-1::-webkit-scrollbar{
        width: 12px;
        background-color: #F5F5F5;
    }
    /*定义滑块的样式*/
    #style-1::-webkit-scrollbar-thumb{
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #555;
    }
    #style-2::-webkit-scrollbar-track{
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
        background-color: #F5F5F5;
    }
    #style-2::-webkit-scrollbar{
        width: 12px;
        background-color: #F5F5F5;
    }
    #style-2::-webkit-scrollbar-thumb{
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #D62929;
    }
    #style-3::-webkit-scrollbar-track{
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        background-color: #F5F5F5;
    }
    #style-3::-webkit-scrollbar{
        width: 6px;
        background-color: #F5F5F5;
    }
    #style-3::-webkit-scrollbar-thumb{
        background-color: #000000;
    }
    #style-4::-webkit-scrollbar-track{
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        background-color: #F5F5F5;
    }
    #style-4::-webkit-scrollbar{
        width: 10px;
        background-color: #F5F5F5;
    }
    #style-4::-webkit-scrollbar-thumb
    {
        background-color: #0ae;
        background-image: -webkit-gradient(linear, 0 0, 0 100%,color-stop(.5, rgba(255, 255, 255, .2)),color-stop(.5, transparent), to(transparent));
    }
    </style>
</head>
<body>
<div id="wrapper">
        <div id="style-default">
            <div></div>
        </div>
        <div id="style-1">
            <div></div>
        </div>
        <div id="style-2">
            <div></div>
        </div>
        <div id="style-3">
            <div></div>
        </div>
        <div id="style-4">
            <div></div>
        </div>
</div>
</body>
</html>

滚动条的高级设置

滚动条的自定义就是利用伪元素与伪类来进行的!

关于伪类大家最熟悉的应该就是 :link、:focus、:hover,除此之外 CSS3 中又给增加了许多伪类选择器,如 :nth-child、:last-child、:nth-last-of-type() 等。

CSS中伪元素有 :first-line、:first-letter、:before、:after。而在CSS3中,伪元素进行了调整和升级,就是在以前的基础上增加了一个“:”也就是现在变成了“::first-letter、::first-line、::before、::after”,另外CSS3还增加了一个“::selection”。两个“::”和一个“:”在css3中主要用来区分伪类和伪元素。

webkit内核的浏览器对伪类和伪元素的支持性是很强大的,我们可以把滚动条当成一个页面元素来定义,再结合一些高级的CSS3属性,比如渐变、圆角等等。

下面的伪类可以应用到上面的伪元素中,进行各种高级复杂的设置。

:horizontal  
//horizontal伪类适用于任何水平方向上的滚动条  
  
:vertical  
//vertical伪类适用于任何垂直方向的滚动条  
  
:decrement  
//decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片,例如可以使区域向上或者向右移动的区域和按钮  
  
:increment  
//increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片,例如可以使区域向下或者向左移动的区域和按钮  
  
:start  
//start伪类适用于按钮和轨道碎片。表示对象(按钮 轨道碎片)是否放在滑块的前面  
  
:end  
//end伪类适用于按钮和轨道碎片。表示对象(按钮 轨道碎片)是否放在滑块的后面  
  
:double-button  
//double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。  
  
:single-button  
//single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。  
  
:no-button  
no-button伪类表示轨道结束的位置没有按钮。  
  
:corner-present  
//corner-present伪类表示滚动条的角落是否存在。  
  
:window-inactive  
//适用于所有滚动条,表示包含滚动条的区域,焦点不在该窗口的时候。  
::-webkit-scrollbar-track-piece:start {  
/*滚动条上半边或左半边*/  
}  
::-webkit-scrollbar-thumb:window-inactive {  
/*当焦点不在当前区域滑块的状态*/  
}  
::-webkit-scrollbar-button:horizontal:decrement:hover {  
/*当鼠标在水平滚动条下面的按钮上的状态*/  
}

示例代码:

请将代码复制到本地,保存为 HTML 文件后进行查看

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS3自定义滚动条</title>
    <style>
    *{margin: 0;padding: 0;}
    #container{
        width: 100%;
        height: 1200px;
        line-height: 600px;
        text-align: center;
        background: #ccc;
    }
    /*定义滚动条的高宽*/
    ::-webkit-scrollbar {
        width: 16px;
        height: 16px;
    }
    /*显示滚动条上方的渐增按钮*/
    ::-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-button:end:increment {
        background-color: rgb(83, 6, 184);
    }
    /* 定义滚动条渐减按扭的样式 */
    ::-webkit-scrollbar-button:start:decrement {
        background-color: rgb(224, 10, 189);
    }
    /* 垂直滚动条的滑动块 */
    ::-webkit-scrollbar-thumb:vertical {
        height: 56px;
        background-color: brown;
    }
    /* 垂直滚动条的第三层轨道的上段 */
    ::-webkit-scrollbar-track-piece:vertical:start {
        background-color: aqua;
    }
    /* 垂直滚动条的第三层轨道的下段 */
    ::-webkit-scrollbar-track-piece:vertical:end {
        background-color: rgb(204, 218, 12);
    }
    </style>
</head>
<body>
    <div id="container">CSS3自定义滚动条<br/>飞鸟慕鱼博客</div>
</body>
</html>