zoukankan      html  css  js  c++  java
  • css 横向滚动条webkit-scrollbar

    最近遇到一个横向滚动条的问题:

    官网链接:

    https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar

    
    

    这个 ::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式

    
    

    ::-webkit-scrollbar 仅仅在支持WebKit的浏览器 (例如, 谷歌Chrome, 苹果Safari)可以使用.


    CSS滚动条选择器Section 你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式: css文件中:设置全局样式: ::
    -webkit-scrollbar — 整个滚动条. ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头). ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块. ::-webkit-scrollbar-track — 滚动条轨道. ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分. ::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分. ::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).


    eg:
    可以设置一个元素的滚动条:
    .invisible-scrollbar::-webkit-scrollbar {
      display: none;
    }


    .mostly-customized-scrollbar::-webkit-scrollbar {
      width: 5px;
      height: 8px;
      background-color: #aaa; /* or add it to the track */
    }

    我这里是修改宽度:
    $("#adminList").css("overflow-x","auto");

      修改样式后:

      

    ::-webkit-scrollbar{500px;height: 7px}
    ::-webkit-scrollbar-thumb{
    background: rgb(0, 0, 0);
    7px;
    opacity: 0.4;
    border-radius: 7px;
    z-index: 99;
    }


    图中白色的即是:相比默认的要好很多..


    
    


  • 相关阅读:
    架构师图谱
    P3398 仓鼠找sugar
    NOIP 2017小凯的疑惑
    P2568 GCD
    自动AC机
    qbxt国庆刷题班 游记&总结
    【学习笔记】manacher算法
    [ZROI]分组
    BSGS与扩展BSGS
    Crt and ExCrt
  • 原文地址:https://www.cnblogs.com/cbugs/p/9752875.html
Copyright © 2011-2022 走看看