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

    /*滚动条全局样式  ------- 如只是莫一指定的滚动条 可以带上它的id class等*/
    ::-webkit-scrollbar {
    10px;//表示垂直滚动条的宽度
    height: 10px;//表示水平滚动条的高度
    }
    /*正常情况下滑块的样式*/
    .sys_module_conten::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,.05);
    border-radius: 4px;
    -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
    }
    /*鼠标悬浮在该类指向的控件上时滑块的样式*/
    ::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,.2);
    border-radius: 4px;
    -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
    }
    /*鼠标悬浮在滑块上时滑块的样式*/
    ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0,0,0,.4);
    -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
    }

    /*正常时候的主干轨道部分*/
    ::-webkit-scrollbar-track {
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
    background-color: white;
    }
    /*鼠标悬浮在滚动条上的主干轨道部分*/
    ::-webkit-scrollbar-track:hover {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.4);
    background-color: rgba(0,0,0,.01);
    }
  • 相关阅读:
    spring小结2:spring管理bean原理(转帖)
    JAVA Web.xml 加载顺序
    mysql into outfile导出方式
    从平安面试归来
    如何避开求职陷阱
    关注基金走势先~~
    如何谈薪资
    包含数据分析的坐标图测试
    面试题分享
    ShaiShai.net
  • 原文地址:https://www.cnblogs.com/lihong-123/p/9752924.html
Copyright © 2011-2022 走看看