• CSS3自定义滚动条样式 -webkit-scrollbar


    一、滚动条的形成:

       当内容超出容器时,容器会出现滚动条。

    二、如需改变滚动条样式,可通过css伪类来实现。

    • 首先我们要了解滚动条。滚动条从外观来看是由两部分组成:

        1,可以滑动的部分,我们叫它滑块

        2,滚动条的轨道。

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

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

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

          3,::-webkit-scrollbar-track 轨道部分;

     三、代码实现:

    效果图:

    html代码:

    <div class="test">
        <div class="scrollbar"></div>
    </div>

    css代码

    .test{
         50px;
        height: 200px;
        overflow: auto;
        float: left;
        margin: 5px;
        border: none;
    }
    .scrollbar{
         30px;
        height: 300px;
        margin: 0 auto;
      
    }
      // 滚动条
      .test::-webkit-scrollbar{
         6px;
        height: 206px;
        background: #3d6599;
        margin-top: 20px;
      }
      // 滑块
      .test::-webkit-scrollbar-thumb {
        border-radius: 10px;
        // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #85baff;
        height: 120px;
      }
      // 滑块轨道
      .test::-webkit-scrollbar-track{
        // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
        background-color: #3d6599;
        // height: 206px;
        // border: 1px solid red;
      }
    View Code

    注意:进度条的样式不要嵌套在class为test的样式里,需要写在.test样式外。

    致力于前端技术学习与分享,会及时更新博客。
  • 相关阅读:
    please get a license from www.texturepacker.com
    2014阿里巴巴WEB前端实习生在线笔试题
    javascript实现日期时间动态显示
    NHibernate之旅(8):巧用组件之依赖对象
    软工视频再识
    Android ListView 的优化
    hdu 5001 概率DP 图上的DP
    Android 代码设置Activity 背景透明
    内存数据网格IMDG简单介绍
    JavaFX2
  • 原文地址:https://www.cnblogs.com/caoxueying2018/p/10077638.html
Copyright © 2020-2023  润新知