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

兼容火狐：主要是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设置滚动条样式

有用的话请点赞，关注加收藏哦(｡･ω･｡)ﾉ♡

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

猜你喜欢