zoukankan      html  css  js  c++  java
  • CSS3自定义滚动条样式 -webkit-scrollbar

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

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

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

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

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

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

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

    html代码:

    <div class="test test-1">

       <div class="scrollbar"></div>
    </div>
    css代码:
    .test{
        width50px;
        height200px;
        overflowauto;
        floatleft;
        margin5px;
        bordernone;
    }
    .scrollbar{
        width30px;
        height300px;
        margin0 auto;
     
    }
    .test-1::-webkit-scrollbar {/*滚动条整体样式*/
            width5px;     /*高宽分别对应横竖滚动条的尺寸*/
            height1px;
        }
    .test-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 10px;
            background#e5e5e5
    ;
        }
    .test-1::-webkit-scrollbar-track {/*滚动条里面轨道*/
            border-radius: 10px;
            background#EDEDED;
        }
    如果要改变滚动条的宽度:在::-webkit-scrollbar中改变即可;如果要改变滚动条滑块的圆角,
      在::-webkit-scrollbar-thumb 中改变;
      如果要改轨道的圆角在::-webkit-scrollbar-track中改变;
     
  • 相关阅读:
    python多线程实现抓取网页
    调用百度地图实如今地图上定位
    Java创建二叉树
    J2EE的13个规范
    现场故障 案例:控制文件损坏
    数据库原理常见问答
    Lucene整理--中文分词
    Linux发行版
    python中异常好用的工具
    python有趣的一行代码
  • 原文地址:https://www.cnblogs.com/da-yao/p/8675058.html
Copyright © 2011-2022 走看看