zoukankan      html  css  js  c++  java
  • 滚动条样式修改

    1.谷歌浏览器(WebKit内核):

    //滚动条设置
    .element::-webkit-scrollbar{
       10px;
      height: 10px;
    }
    //滚动槽设置
    .element::-webkit-scrollbar-track {
      border-radius: 10px;
      background: rgba(2,11,45,0.5);
      border: none;
    }
    //横向纵向滚动条交汇处设置
    .element::-webkit-scrollbar-corner {
      background: transparent;
    }
    //拖动滑块设置
    .element::-webkit-scrollbar-thumb {
      background: rgba(53,127,191,0.8);
      border-radius: 10px;
    }
    //滑块悬浮设置
    .element::-webkit-scrollbar-thumb:hover {
      background: rgba(53,127,191,1);
    }

    展示:

    2.火狐:

    写在overflow-y同级的位置,将滚动条置为透明,以此规避丑丑的滚动条样式。

    .element {
      overflow-y: auto;
      scrollbar-color: transparent transparent;  
    }

    3.IE:

    写在overflow-y同级的位置,由于在ie下transparent无效,故将滚动条置为页面背景色,以此规避丑丑的滚动条样式。

    .element {
        overflow-y: auto;
        scrollbar-arrow-color: #f0f2f5;  /* 设置滚动条上的箭头颜色  */
        scrollbar-base-color: #f0f2f5;  /* 设置滚动条的底色 */
        scrollbar-track-color: #f0f2f5;  /* 设置滚动条块的背景色 */
        scrollbar-shadow-color: #f0f2f5;  /* 设置箭头和滚动条右侧和底边的颜色 */
    }

    tip: 因为火狐和IE没做兼容,所以后两种没有用到,因此没有实测过

  • 相关阅读:
    Beta版本冲刺第二天 12.6
    Beta版本冲刺第一天 12.5
    Linux学习(2)—— 图形化界面
    Linux学习(1)—— 虚拟机安装Linux系统
    IntelliJ IDEA使用
    spring+springmvc+hibernate 整合
    新的篇章
    软件工程实践总结作业——个人作业
    Beta版本冲刺———第七天
    Beta版本冲刺———第六天
  • 原文地址:https://www.cnblogs.com/97pkp/p/12895932.html
Copyright © 2011-2022 走看看