zoukankan      html  css  js  c++  java
  • 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 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
  • 相关阅读:
    远程推送(个推)
    transform3D实现翻页效果
    启发式搜索 A*算法的OC 实现
    IOS 高级开发 KVC(二)
    IOS 高级开发 KVC(一)
    IOS 应用程序启动加载过程(从点击图标到界面显示)
    堆排序的OC实现
    iOS 高级开发 runtime(三)
    IOS 高级开发 runtime(二)
    RxSwift
  • 原文地址:https://www.cnblogs.com/ximiximi-blog/p/9274868.html
Copyright © 2011-2022 走看看