2023年6月20日发(作者：)

⽤纯css设置Firefox⽕狐浏览器的滚动条样式设置Firefox滚动条样式的css属性只有

scrollbar-color 和

scrollbar-width 这两个。看名字就知道第⼀个是设置滚动条颜⾊的，第⼆个是设置滚动条(竖直⽅向)宽度，(⽔平⽅向)⾼度的。在Firefox中设置滚动条的样式 在Firefox中设置滚动条的样式

效果：⽤Firefox打开应该能看到红⾊的滚动滑块和天蓝⾊的滑动插槽。scrollbar-color的语法/*scrollbar-color: auto | dark | light | {2};*/scrollbar-color: auto; /* 使⽤浏览器默认的滚动条样式 */scrollbar-color: dark; /* 使⽤浏览器默认的深⾊或者⿊⾊滚动效果 */scrollbar-color: light; /* 使⽤浏览器默认的浅⾊滚动效果 */scrollbar-color: red #00f; /* 第⼀个颜⾊为滚动条的颜⾊， 第⼆个颜⾊为滚动条轨道的颜⾊ */scrollbar-width的语法/*sscrollbar-width: auto | thin | none | ;*/scrollbar-width: auto; /* 使⽤浏览器默认的滚动宽度 */scrollbar-width: thin; /* 设置⽐默认滚动条宽度更窄的宽度 */scrollbar-width: none; /* 隐藏滚动条，但是元素还是可以滚动 */scrollbar-width: 66px; /* 直接设置滚动条的宽度，⽐如 60px 3vh 4wh 5rem 6rm 等长度 */只对Firefox⾼于64以上的版本有效Firefox低版本可以⽤这个插件做兼容。具体⽤法可以看⽂档。都9102年了，估计低版本的Firefox已经没啥⼈使⽤了。参考：overflow：Scrollbars：scrollbar-color：scrollbar-width：roll:

2023年6月20日发(作者：)

⽤纯css设置Firefox⽕狐浏览器的滚动条样式设置Firefox滚动条样式的css属性只有

scrollbar-color 和

scrollbar-width 这两个。看名字就知道第⼀个是设置滚动条颜⾊的，第⼆个是设置滚动条(竖直⽅向)宽度，(⽔平⽅向)⾼度的。在Firefox中设置滚动条的样式 在Firefox中设置滚动条的样式

效果：⽤Firefox打开应该能看到红⾊的滚动滑块和天蓝⾊的滑动插槽。scrollbar-color的语法/*scrollbar-color: auto | dark | light | {2};*/scrollbar-color: auto; /* 使⽤浏览器默认的滚动条样式 */scrollbar-color: dark; /* 使⽤浏览器默认的深⾊或者⿊⾊滚动效果 */scrollbar-color: light; /* 使⽤浏览器默认的浅⾊滚动效果 */scrollbar-color: red #00f; /* 第⼀个颜⾊为滚动条的颜⾊， 第⼆个颜⾊为滚动条轨道的颜⾊ */scrollbar-width的语法/*sscrollbar-width: auto | thin | none | ;*/scrollbar-width: auto; /* 使⽤浏览器默认的滚动宽度 */scrollbar-width: thin; /* 设置⽐默认滚动条宽度更窄的宽度 */scrollbar-width: none; /* 隐藏滚动条，但是元素还是可以滚动 */scrollbar-width: 66px; /* 直接设置滚动条的宽度，⽐如 60px 3vh 4wh 5rem 6rm 等长度 */只对Firefox⾼于64以上的版本有效Firefox低版本可以⽤这个插件做兼容。具体⽤法可以看⽂档。都9102年了，估计低版本的Firefox已经没啥⼈使⽤了。参考：overflow：Scrollbars：scrollbar-color：scrollbar-width：roll: