兼容火狐:主要是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设置滚动条样式
有用的话请点赞,关注加收藏哦(。・ω・。)ノ♡