您现在的位置是:首页 > 正文

css修改滚动条样式(兼容火狐)

2024-01-30 20:12:40阅读 1

兼容火狐:主要是scrollbar-width: thin;(此属性很重要)

火狐滚动条无法自定义宽度,只能通过此属性使滚动条宽度变细

.home-right-buttom-schedule-Todayoffice_count {
   scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.1);
   /* 第一个方块颜色,第二个轨道颜色(用于更改火狐浏览器样式) */
   scrollbar-width: thin;
   /* 火狐滚动条无法自定义宽度,只能通过此属性使滚动条宽度变细 */
   -ms-overflow-style: none;
   width: 100%;
   height: calc(100% - 35px);
   overflow-y: auto;
}
.home-right-buttom-schedule-Todayoffice_count::-webkit-scrollbar {
   width: 8px;
   height: 8px;
}
.home-right-buttom-schedule-Todayoffice_count::-webkit-scrollbar-thumb {
   // border-radius: 10px;
   // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: rgba(0, 0, 0, 0.2)
}
.home-right-buttom-schedule-Todayoffice_count::-webkit-scrollbar-track {
   // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 0;
      background: rgba(0, 0, 0, 0.1);
}

滚动条属性参考:

1::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的
2::-webkit-scrollbar-button 滚动条两端的按钮
3::-webkit-scrollbar-track  外层轨道
4::-webkit-scrollbar-track-piece  内层滚动槽
5::-webkit-scrollbar-thumb 滚动的滑块
6::-webkit-scrollbar-corner 边角
7::-webkit-resizer 定义右下角拖动块的样式
参考文献:浏览器滚动条样式自定义(兼容火狐) - huihuihero - 博客园

参考文献:css如何修改滚动条样式_优睿的博客-CSDN博客_css设置滚动条样式

有用的话请点赞,关注加收藏哦(。・ω・。)ノ♡

网站文章

  • idea调试之条件断点

    idea调试之条件断点

    开发中有时会出现这样的场景,在一个很长的for循环中,我们只想在某一次循环中(比如第50次循环,或者循环中某个值符合条件)让断点停住,进行进一步的调试分析,此时使用idea的条件断点就能很方便的解决问题。举例如下:package demo;public class ConditionalBreakPointDemo { public static void main(S...

    2024-01-30 20:12:11
  • 巨星陨落!清华大学发讣告

    巨星陨落!清华大学发讣告

    点击下方卡片,关注“CVer”公众号AI/CV重磅干货,第一时间送达点击进入—>【计算机视觉和Transformer】交流群转载自:募格学术 | 来源:清华大学、软科等。11月4日,清华大学官微发讣告:中国共产党党员、中国科学院院士、国际著名摩擦学专家、原摩擦学国家重点实验室创始人、清华大学机械工程系教授温诗铸同志,因病医治无效,于2023年11月3日在北京逝世,享年91岁。温诗铸院士193...

    2024-01-30 20:12:04
  • FPGA的一些细节(持续更新)

    FPGA的一些细节(持续更新)

    1.一个工程所在的文件夹,从开始路径到最终路径都要以英文命名,否则会编译出错;

    2024-01-30 20:11:57
  • Hadoop中HDFS目录字符长度和目录级数限制

    今天忙里抽闲,看了一点hadoop的源码,偶然间看到了HDFS的目录字符限制和目录的级数限制。远远超过我的预期,没想到设置的这么大。如下: // We need to limit the length and depth of a path in the filesystem. HADOOP-438 // Currently we set the maximum length

    2024-01-30 20:11:28
  • vtkMapper::ImmediateModeRenderingOff解决办法

    vtkMapper::ImmediateModeRenderingOff解决办法

    vtkMapper::ImmediateModeRenderingOff解决办法项目属性页 —> C/C++ —> 常规 —> SDL检查:设置为否注意:包括上面解决方案空白处右键属性页、以及下面属性管理器的属性页测试可行

    2024-01-30 20:11:21
  • 单片机输入输出接口隔离或者增加驱动能力电路

    单片机输入输出接口隔离或者增加驱动能力电路

      随着微电子技术和计算机技术的发展,原来以强电和电器为主、功能简单的电气设备发展成为强、弱电结合,具有数字化特点、功能完善的新型微电子设备。 在很多场合,已经出现了越来越多的单片机产品代替传统的电气...

    2024-01-30 20:11:13
  • 什么是交互式登录 Shell

    什么是交互式登录 Shell

    如何区分登录Shell和非登录Shell呢,可以通过查看$0的值,登录Shell返回-bash,而非登录Shell返回的是bash。Linux用了这么多年,Shell一直在用,执行命令,安装软件,配置...

    2024-01-30 20:10:45
  • orcale的to_number方法

    orcale的to_number方法

    TO_NUMBER函数()是Oracle中常用的类型转换函数之一,主要是将字符串转换为数值型的格式,与TO_CHAR()函数的作用正好相反。To_number函数的格式如下:To_number(var...

    2024-01-30 20:10:38
  • JS 转换HTML转义符

    JS转换HTML转义符//去掉html标签123functionremoveHtmlTab(tab) {returntab.replace(/<[^<>]+?>/g,'');//删除所有HTML标签}//普通字符转换成转意符12...

    2024-01-30 20:10:31
  • vs2008中在解决方案资源管理器查看当前打开文件

    vs2008中在解决方案资源管理器查看当前打开文件

    2019独角兽企业重金招聘Python工程师标准&gt;&gt;&gt; ...

    2024-01-30 20:10:23