• css 溢出滚动条显示,修改滚动条样式


    文本或者内容溢出滚动条显示:

    a/横纵都出滚动条:css添加属性{overflow:auto;}

    b/横向滚动条:css添加属性{overflow-x:auto;}

    c/纵向滚动条:css添加属性{overflow-y:auto;}

    修改滚动条样式:

    <style>
    /*定义滚动条轨道 内阴影+圆角*/
    .ximiBlock::-webkit-scrollbar-track
    {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
    border-radius: 5px;
    background-color: rgba(255,255,255,0.8);
    }


    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    .ximiBlock::-webkit-scrollbar
    {
    5px;
    background-color: rgba(0,0,0,0);
    }
      /*定义滑块 内阴影+圆角*/
    .ximiBlock::-webkit-scrollbar-thumb
    {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.3);
    background-color: #555;
    }
     
    </style>
    

      

    • ::-webkit-scrollbar 滚动条整体部分
    • ::-webkit-scrollbar-thumb  滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)
    • ::-webkit-scrollbar-track  滚动条的轨道(里面装有Thumb)
    • ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。
    • ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)
    • ::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处
    • ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
  • 相关阅读:
    【linux系列】配置免密登陆
    【linux系列】centos安装vsftp
    【linux系列】cenos7安装jdk
    MySQL DATE_SUB()
    Java基本数据类型
    Gson使用中遇到的Date格式问题
    数组中存放对象之java中定义类数组存放类
    获取X天后的日期
    sql统计总和和各状态数
    HttpServletRequest获取URL?后面的内容
  • 原文地址:https://www.cnblogs.com/ximiximi-blog/p/9274868.html
Copyright © 2020-2023  润新知