• css 滚动条样式


    <!DOCTYPE html>
    <!-- saved from url=(0061)http://www.xuanfengge.com/demo/201311/scroll/css3-scroll.html -->
    <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <title>CSS3自定义滚动条-轩枫阁</title>
    <style>
    header
    {
        font-family: 'Lobster', cursive;
        text-align: center;
        font-size: 25px;    
    }
    
    #info
    {
        font-size: 18px;
        color: #555;
        text-align: center;
        margin-bottom: 25px;
    }
    
    a{
        color: #074E8C;
    }
    
    .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
     */
    
    #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
     */
    
    #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
     */
    
    #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
     */
    
    #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: #000000;
        border: 2px solid #555555;
    }
    
    
    /*
     *  STYLE 5
     */
    
    #style-5::-webkit-scrollbar-track
    {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        background-color: #F5F5F5;
    }
    
    #style-5::-webkit-scrollbar
    {
        width: 10px;
        background-color: #F5F5F5;
    }
    
    #style-5::-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 6
     */
    
    #style-6::-webkit-scrollbar-track
    {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        background-color: #F5F5F5;
    }
    
    #style-6::-webkit-scrollbar
    {
        width: 10px;
        background-color: #F5F5F5;
    }
    
    #style-6::-webkit-scrollbar-thumb
    {
        background-color: #F90;    
        background-image: -webkit-linear-gradient(45deg,
                                                  rgba(255, 255, 255, .2) 25%,
                                                  transparent 25%,
                                                  transparent 50%,
                                                  rgba(255, 255, 255, .2) 50%,
                                                  rgba(255, 255, 255, .2) 75%,
                                                  transparent 75%,
                                                  transparent)
    }
    
    
    /*
     *  STYLE 7
     */
    
    #style-7::-webkit-scrollbar-track
    {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        background-color: #F5F5F5;
        border-radius: 10px;
    }
    
    #style-7::-webkit-scrollbar
    {
        width: 10px;
        background-color: #F5F5F5;
    }
    
    #style-7::-webkit-scrollbar-thumb
    {
        border-radius: 10px;
        background-image: -webkit-gradient(linear,
                                           left bottom,
                                           left top,
                                           color-stop(0.44, rgb(122,153,217)),
                                           color-stop(0.72, rgb(73,125,189)),
                                           color-stop(0.86, rgb(28,58,148)));
    }
    
    /*
     *  STYLE 8
     */
    
    #style-8::-webkit-scrollbar-track
    {
        border: 1px solid black;
        background-color: #F5F5F5;
    }
    
    #style-8::-webkit-scrollbar
    {
        width: 10px;
        background-color: #F5F5F5;
    }
    
    #style-8::-webkit-scrollbar-thumb
    {
        background-color: #000000;    
    }
    
    
    /*
     *  STYLE 9
     */
    
    #style-9::-webkit-scrollbar-track
    {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        background-color: #F5F5F5;
    }
    
    #style-9::-webkit-scrollbar
    {
        width: 10px;
        background-color: #F5F5F5;
    }
    
    #style-9::-webkit-scrollbar-thumb
    {
        background-color: #F90;    
        background-image: -webkit-linear-gradient(90deg,
                                                  rgba(255, 255, 255, .2) 25%,
                                                  transparent 25%,
                                                  transparent 50%,
                                                  rgba(255, 255, 255, .2) 50%,
                                                  rgba(255, 255, 255, .2) 75%,
                                                  transparent 75%,
                                                  transparent)
    }
    
    
    /*
     *  STYLE 10
     */
    
    #style-10::-webkit-scrollbar-track
    {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        background-color: #F5F5F5;
        border-radius: 10px;
    }
    
    #style-10::-webkit-scrollbar
    {
        width: 10px;
        background-color: #F5F5F5;
    }
    
    #style-10::-webkit-scrollbar-thumb
    {
        background-color: #AAA;
        border-radius: 10px;
        background-image: -webkit-linear-gradient(90deg,
                                                  rgba(0, 0, 0, .2) 25%,
                                                  transparent 25%,
                                                  transparent 50%,
                                                  rgba(0, 0, 0, .2) 50%,
                                                  rgba(0, 0, 0, .2) 75%,
                                                  transparent 75%,
                                                  transparent)
    }
    
    
    /*
     *  STYLE 11
     */
    
    #style-11::-webkit-scrollbar-track
    {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        background-color: #F5F5F5;
        border-radius: 10px;
    }
    
    #style-11::-webkit-scrollbar
    {
        width: 10px;
        background-color: #F5F5F5;
    }
    
    #style-11::-webkit-scrollbar-thumb
    {
        background-color: #3366FF;
        border-radius: 10px;
        background-image: -webkit-linear-gradient(0deg,
                                                  rgba(255, 255, 255, 0.5) 25%,
                                                  transparent 25%,
                                                  transparent 50%,
                                                  rgba(255, 255, 255, 0.5) 50%,
                                                  rgba(255, 255, 255, 0.5) 75%,
                                                  transparent 75%,
                                                  transparent)
    }
    
    /*
     *  STYLE 12
     */
    
    #style-12::-webkit-scrollbar-track
    {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
        border-radius: 10px;
        background-color: #444444;
    }
    
    #style-12::-webkit-scrollbar
    {
        width: 12px;
        background-color: #F5F5F5;
    }
    
    #style-12::-webkit-scrollbar-thumb
    {
        border-radius: 10px;
        background-color: #D62929;
        background-image: -webkit-linear-gradient(90deg,
                                                  transparent,
                                                  rgba(0, 0, 0, 0.4) 50%,
                                                  transparent,
                                                  transparent)
    }
    
    /*
     *  STYLE 13
     */
    
    #style-13::-webkit-scrollbar-track
    {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
        border-radius: 10px;
        background-color: #CCCCCC;
    }
    
    #style-13::-webkit-scrollbar
    {
        width: 12px;
        background-color: #F5F5F5;
    }
    
    #style-13::-webkit-scrollbar-thumb
    {
        border-radius: 10px;
        background-color: #D62929;
        background-image: -webkit-linear-gradient(90deg,
                                                  transparent,
                                                  rgba(0, 0, 0, 0.4) 50%,
                                                  transparent,
                                                  transparent)
    }
    
    /*
     *  STYLE 14
     */
    
    #style-14::-webkit-scrollbar-track
    {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
        background-color: #CCCCCC;
    }
    
    #style-14::-webkit-scrollbar
    {
        width: 10px;
        background-color: #F5F5F5;
    }
    
    #style-14::-webkit-scrollbar-thumb
    {
        background-color: #FFF;
        background-image: -webkit-linear-gradient(90deg,
                                                  rgba(0, 0, 0, 1) 0%,
                                                  rgba(0, 0, 0, 1) 25%,
                                                  transparent 100%,
                                                  rgba(0, 0, 0, 1) 75%,
                                                  transparent)
    }
    
    /*
     *  STYLE 15
     */
    
    #style-15::-webkit-scrollbar-track
    {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
        background-color: #F5F5F5;
        border-radius: 10px;
    }
    
    #style-15::-webkit-scrollbar
    {
        width: 10px;
        background-color: #F5F5F5;
    }
    
    #style-15::-webkit-scrollbar-thumb
    {
        border-radius: 10px;
        background-color: #FFF;
        background-image: -webkit-gradient(linear,
                                           40% 0%,
                                           75% 84%,
                                           from(#4D9C41),
                                           to(#19911D),
                                           color-stop(.6,#54DE5D))
    }
    
    /*
     *  STYLE 16
     */
    
    #style-16::-webkit-scrollbar-track
    {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
        background-color: #F5F5F5;
        border-radius: 10px;
    }
    
    #style-16::-webkit-scrollbar
    {
        width: 10px;
        background-color: #F5F5F5;
    }
    
    #style-16::-webkit-scrollbar-thumb
    {
        border-radius: 10px;
        background-color: #FFF;
        background-image: -webkit-linear-gradient(top,
                                                  #e4f5fc 0%,
                                                  #bfe8f9 50%,
                                                  #9fd8ef 51%,
                                                  #2ab0ed 100%);
    }
    
    
    </style>
    </head>
    <body>
          <div id="wrapper">
            <div class="scrollbar" id="style-default">
              <div class="force-overflow"></div>
            </div>
    
            <div class="scrollbar" id="style-1">
              <div class="force-overflow"></div>
            </div>
    
            <div class="scrollbar" id="style-2">
              <div class="force-overflow"></div>
            </div>
    
            <div class="scrollbar" id="style-3">
              <div class="force-overflow"></div>
            </div>
    
            <div class="scrollbar" id="style-4">
              <div class="force-overflow"></div>
            </div>
    
            <div class="scrollbar" id="style-5">
              <div class="force-overflow"></div>
            </div>
    
            <div class="scrollbar" id="style-6">
              <div class="force-overflow"></div>
            </div>
    
            <div class="scrollbar" id="style-7">
              <div class="force-overflow"></div>
            </div>
    
            <div class="scrollbar" id="style-8">
              <div class="force-overflow"></div>
            </div>
    
            <div class="scrollbar" id="style-9">
              <div class="force-overflow"></div>
            </div>
    
            <div class="scrollbar" id="style-10">
              <div class="force-overflow"></div>
            </div>
    
            <div class="scrollbar" id="style-11">
              <div class="force-overflow"></div>
            </div>
    
            <div class="scrollbar" id="style-13">
              <div class="force-overflow"></div>
            </div>
    
            <div class="scrollbar" id="style-14">
              <div class="force-overflow"></div>
            </div>
    
            <div class="scrollbar" id="style-15">
              <div class="force-overflow"></div>
            </div>
        </div>
    
    </body></html>

     以上为html示例,下面是简单的示例

    当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过css伪类来实现对滚动条的自定义。

    首先我们要了解滚动条。滚动条从外观来看是由两部分组成:1,可以滑动的部分,我们叫它滑块2,滚动条的轨道,即滑块的轨道,一般来说滑块的颜色比轨道的颜色深。

    滚动条的css样式主要有三部分组成:

      1、::-webkit-scrollbar   定义了滚动条整体的样式;

         2、::-webkit-scrollbar-thumb  滑块部分;

       3、::-webkit-scrollbar-thumb  轨道部分;

    下面以overflow-y:auto;为例(overflow-x:auto同)

    html代码:

    1
    2
    3
    <div class="test test-1">
            <div class="scrollbar"></div>
    </div>

    css代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    .test{
        width: 50px;
        height: 200px;
        overflow: auto;
        float: left;
        margin: 5px;
        border: none;
    }
    .scrollbar{
        width: 30px;
        height: 300px;
        margin: 0 auto;
     
    }
    .test-1::-webkit-scrollbar {/*滚动条整体样式*/
            width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
        }
    .test-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 10px;
             -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: #535353;
        }
    .test-1::-webkit-scrollbar-track {/*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            border-radius: 10px;
            background: #EDEDED;
        }

      效果如下如:

    如果要改变滚动条的宽度:在::-webkit-scrollbar中改变即可;如果要改变滚动条滑块的圆角,在::-webkit-scrollbar-thumb 中改变;如果要改轨道的圆角在::-webkit-scrollbar-track中改变;

    此外,滚动条的滑块不仅可以填充颜色还可以填充图片如下:

    css代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    .test-5::-webkit-scrollbar {/*滚动条整体样式*/
        width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
    .test-5::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 10px;
    background-color: #F90;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
        }
    .test-5::-webkit-scrollbar-track {/*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            /*border-radius: 10px;*/
            background: #EDEDED;
        }

    html代码:

    1
    2
    3
    <div class="test test-5">
        <div class="scrollbar"></div>
    </div>

     效果如下:

    以上就可以做出自己喜欢的滚动条了;

    如果文档中会有多个滚动条出现,而且希望所有的滚动条样式是一样的,那么伪元素前面不需要加上class、id、标签名等之类的任何东西。

  • 相关阅读:
    【邀请函】小投入 大产出—微软智能云(Azure)之CDN 专题
    Azure镜像市场再下一城,中标软件入驻开启Azure国产操作系统时代
    15分钟完成基于Azure公有云搭建远程测试环境
    独家秘笈!教你解锁移动应用新技能
    “剁手节”来了,红包你抢到了吗?
    Azure 11 月新公布
    面对故宫万千珍宝,升哲科技如何做到“朕知道了”
    高斯-克吕格投影
    cad定制快捷键
    matlab之scatter3()与plot3()函数
  • 原文地址:https://www.cnblogs.com/zonglonglong/p/6795984.html
Copyright © 2020-2023  润新知