設置Firefox滾動條樣式的css屬性只有 scrollbar-color 和 scrollbar-width 這兩個。看名字就知道第一個是設置滾動條顏色的，第二個是設置滾動條(豎直方向)寬度，(水平方向)高度的。
在Firefox中設置滾動條的樣式
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>在Firefox中設置滾動條的樣式</title>
<style>
.wrap{
height: 300px;
width: 300px;
background-color: #e9f;
overflow: scroll;
scrollbar-color: red #0ff;
scrollbar-width: 88px;
}
.inner{
height: 500px;
width: 500px;
background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner"></div>
</div>
</body>
</html>
效果：用Firefox打開應該能看到紅色的滾動滑塊和天藍色的滑動插槽。
scrollbar-color的語法
/*
scrollbar-color: auto | dark | light | <color>{2};
*/
scrollbar-color: auto; /* 使用瀏覽器默認的滾動條樣式 */
scrollbar-color: dark; /* 使用瀏覽器默認的深色或者黑色滾動效果 */
scrollbar-color: light; /* 使用瀏覽器默認的淺色滾動效果 */
scrollbar-color: red #00f; /* 第一個顏色為滾動條的顏色， 第二個顏色為滾動條軌道的顏色 */
scrollbar-width的語法
/*
sscrollbar-width: auto | thin | none | <width>;
*/
scrollbar-width: auto; /* 使用瀏覽器默認的滾動寬度 */
scrollbar-width: thin; /* 設置比默認滾動條寬度更窄的寬度 */
scrollbar-width: none; /* 隱藏滾動條，但是元素還是可以滾動 */
scrollbar-width: 66px; /* 直接設置滾動條的寬度，比如 60px 3vh 4wh 5rem 6rm 等長度 */
只對Firefox高於64以上的版本有效
Firefox低版本可以用jquery.nicescroll這個插件做兼容。具體用法可以看文檔。都9102年了，估計低版本的Firefox已經沒啥人使用了。
參考：
overflow：https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow
Scrollbars：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Scrollbars
scrollbar-color：https://developer.mozilla.org/zh-CN/docs/Web/CSS/scrollbar-color
scrollbar-width：https://developer.mozilla.org/zh-CN/docs/Web/CSS/scrollbar-width
jquery.nicescroll: https://www.npmjs.com/package/jquery.nicescroll