zoukankan      html  css  js  c++  java
  • 滚动条的样式

    /*定义滚动条样式(高宽及背景)*/ 
            ::-webkit-scrollbar { 
                width: 6px;   /* 滚动条宽度, width:对应竖滚动条的宽度  height:对应横滚动条的高度*/
                background: #007acc;
            } 
            /*定义滚动条轨道(凹槽)样式*/ 
            ::-webkit-scrollbar-track { 
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);    /* 较少使用 */
                border-radius: 3px; 
            } 
            /*定义滑块 样式*/ 
            ::-webkit-scrollbar-thumb { 
                border-radius: 3px; 
                height: 100px;    /* 滚动条滑块长度 */
                background-color: #ccc;

    最后,总结 一个滚动条的组成部分(通常设置前三个即可):

    • ::-webkit-scrollbar 滚动条整体部分
    • ::-webkit-scrollbar-thumb  滚动条里面的小方块(即滚动条滑块),能向上向下移动(或横向滚动条可往左往右移动)
    • ::-webkit-scrollbar-track  滚动条的轨道(对应上图滚动条凹槽,里面装有Thumb,即滚动条滑块)
    • ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置
    • ::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处
    • ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分
    • ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
  • 相关阅读:
    服务器负载均衡的基本功能和实现原理
    二分查找
    TCP的运输连接管理
    linux常用命令
    XX公司在线笔试题编程题之一
    java对象转json格式
    Java多线程并发技术
    进程同步与通信
    单例模式的C++实现
    rsyncd启动脚本
  • 原文地址:https://www.cnblogs.com/maxiag/p/13865542.html
Copyright © 2011-2022 走看看