CSS3自定义滚动条样式

发布时间：2022-12-31 20:20:54 来源：网络

.

江南的古屋主要以青砖为材料，砖与砖的缝隙里挤挤挨挨地塞满了苔藓与野草，几根木制的横梁点缀其间。

一些爱折腾的个人网站的站长会嫌弃浏览器原始的滚动条不好看，会想方设法的将浏览器的滚动条进行个性化的自定义，而 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>

本文CSS3自定义滚动条样式到此结束。不怕你没能力，怕你有了能力以后却忘记了努力。小编再次感谢大家对我们的支持！

以下您可能有感兴趣的文章:

标签： HTML CSS