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


    滚动条组成

    • ::-webkit-scrollbar 滚动条整体部分
    • ::-webkit-scrollbar-thumb  滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)
    • ::-webkit-scrollbar-track  滚动条的轨道(里面装有Thumb)
    • ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。
    • ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)
    • ::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处
    • ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

    相应的代码控制

     1 /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
     2 ::-webkit-scrollbar
     3 {
     4      16px;
     5     height: 16px;
     6     background-color: #F5F5F5;
     7 }
     8  
     9 /*定义滚动条轨道 内阴影+圆角*/
    10 ::-webkit-scrollbar-track
    11 {
    12     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    13     border-radius: 10px;
    14     background-color: #F5F5F5;
    15 }
    16  
    17 /*定义滑块 内阴影+圆角*/
    18 ::-webkit-scrollbar-thumb
    19 {
    20     border-radius: 10px;
    21     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    22     background-color: #555;
    23 }
  • 相关阅读:
    Linux系统下DedeCMS安全设置详细教程
    乐淘网CEO毕胜:中国不具备购买玩具的文化
    生意
    Sql Server Cpu 100% 的常见原因及优化
    认准了就去做
    雷军谈互联网七字诀:天下武功唯快不破
    电商需要与实体结合才可行
    Xml Schema命名空间
    高效的MySQL分页
    正则
  • 原文地址:https://www.cnblogs.com/sunnie-cc/p/7955037.html
Copyright © 2020-2023  润新知