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 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
  • 相关阅读:
    day3---字符串的索引与切片
    day4---int bool str之间相互转换
    day3---数据类型整体分析
    day2---while else
    day2---运算符
    day2---格式化输出
    ES6-04 Promise设计 类 模块
    jquery02-效果动画
    jquery01-基础使用
    bootstrap-03 常用重要组件(2)
  • 原文地址:https://www.cnblogs.com/maxiag/p/13865542.html
Copyright © 2011-2022 走看看