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

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

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

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

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

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

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

    html代码:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7       .innerbox{
     8         overflow-y: auto;
     9         background-color: #f8f8f8;
    10         height: 200px;
    11         padding: 10px;
    12       }
    13       .content{
    14         height:500px;
    15       }
    16       .innerbox::-webkit-scrollbar {/*滚动条整体样式*/
    17         width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
    18         height: 10px;
    19         scrollbar-arrow-color:red;
    20 
    21       }
    22       .innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    23         border-radius: 10px;
    24         -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    25         background: #626C83;
    26       }
    27       .innerbox::-webkit-scrollbar-track {/*滚动条里面轨道*/
    28         -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    29         border-radius: 10px;
    30         background: #C9CED6;
    31       }
    32     </style>
    33 </head>
    34 <body>
    35   <div class="innerbox">
    36     11111
    37     <div class="content">
    38 
    39     </div>
    40 
    41   </div>
    42 
    43 </body>
    44 </html>

    效果如下:

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

    在项目中我们通常会修改全局的默认滚动条样式,此时只需要引入一个public.css即可,内容如下:

    。。。。。。每天进步一点点,加油!

  • 相关阅读:
    vue3.0提前了解系列一 通过cli快速搭建一个3.0项目
    vscode卡的飞起解决办法-其中之一
    常用正则表达式整理
    jq-outerhtml不能执行新元素内部的js解决方案
    前端面试题(亲身面试经验)
    MAC上Cisco AnyConnect删除不干净,造成无法重新安装的解决办法
    vue需要知道哪些才能算作入门以及熟练
    jquery版本轮播图(es5版本,兼容高)
    webpack4常用片段
    前端速度优化
  • 原文地址:https://www.cnblogs.com/yuwenjing0727/p/11202311.html
Copyright © 2011-2022 走看看