zoukankan      html  css  js  c++  java
  • 修改浏览器的滚动条样式

    在日常开发中,浏览器自带的滚动条样式比较丑,有时候也与系统整体的色调不搭配,因为需要修改滚动条样式

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

    css样式

     1 div::-webkit-scrollbar{
     2   width:12px;
     3   height:12px;
     4 }
     5 div::-webkit-scrollbar-track{
     6   background: rgb(239, 239, 239);
     7   border-radius:2px;
     8 }
     9 div::-webkit-scrollbar-thumb{
    10   background: #bfbfbf;
    11   border-radius:10px;
    12 }
    13 div::-webkit-scrollbar-thumb:hover{
    14   background: #888;
    15 }
    16 div::-webkit-scrollbar-corner{
    17   background: #179a16;
    18 }

    参数说明

    ::-webkit-scrollbar 滚动条整体部分
    ::-webkit-scrollbar-thumb  滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)
    ::-webkit-scrollbar-track  滚动条的轨道(里面装有Thumb)
    ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。
    ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)
    ::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处
    ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
  • 相关阅读:
    动态二维码
    二维码
    购物车
    logback学习与配置使用
    UML类图几种关系的总结
    java.lang.Excetion,java.lang.RuntimeException,java.lang.Error有什么区别?
    Java编程最差实践
    Hibernate利用@DynamicInsert和@DynamicUpdate生成动态SQL语句
    从 Java 代码到 Java 堆
    Project configuration is not up-to-date with pom.xml
  • 原文地址:https://www.cnblogs.com/luoxuemei/p/11818254.html
Copyright © 2011-2022 走看看