css to modify the scroll bar style (compatible with Firefox)

Compatible with Firefox: mainly scrollbar-width: thin; (this property is very important)

The width of the Firefox scroll bar cannot be customized, and the width of the scroll bar can only be made thinner through this property

.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);
}

Scroll bar property reference:

1::-webkit-scrollbar The overall part of the scroll bar, the width can be set
2::-webkit-scrollbar-button The buttons at both ends of the scroll bar
3::-webkit-scrollbar-track The outer track
4::-webkit-scrollbar -track-piece inner scroll groove
5::-webkit-scrollbar-thumb scrolling slider
6::-webkit-scrollbar-corner corner
7::-webkit-resizer defines the style of the drag block in the lower right corner
References: Browser scroll bar style customization (compatible with Firefox) - huihuihero - 博客园

References: How to modify the scroll bar style with css

If it is useful, please like it, follow it and add to favorites (｡･ω･｡)ﾉ♡