⽤纯css设置Firefox⽕狐浏览器的滚动条样式
设置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;
html横向滚动条样式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低版本可以⽤这个插件做兼容。具体⽤法可以看⽂档。都9102年了，估计低版本的Firefox已经没啥⼈使⽤了。参考：
overflow：
Scrollbars：
scrollbar-color：
scrollbar-width：
jquery.nicescroll:

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。