用css设置Firefox火狐浏览器的滚动条样式
在Firefox中，scrollbar-color属性用于设置滚动条颜色 , scrollbar-width 属性用于设置滚动条的厚度。
scrollbar-color的取值
语法： scrollbar-color: auto | dark | light | <color>{2}
scrollbar-color: auto; /* 使用浏览器默认的滚动条样式 */
scrollbar-color: dark; /* 使用浏览器默认的深色或者黑色滚动效果 */
scrollbar-color: light; /* 使用浏览器默认的浅色滚动效果 */
scrollbar-color: red #00f; /* 第一个色值为滚动条的颜色，第二个色值为滑块的颜色 */
scrollbar-width的取值
语法： scrollbar-width: auto | thin | none
scrollbar-width: auto; /* 使用浏览器默认的滚动宽度 */
scrollbar-width: thin; /* 设置比默认滚动条宽度更窄的宽度 */
scrollbar-width: none; /* 隐藏滚动条，但是元素还是可以滚动 */
在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: thin;
}
.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打开
能看到红色的滚动滑块
和天蓝色的滑动插槽。
能看到红色的滚动滑块
和天蓝色的滑动插槽。
使用其他插件做兼容
Scrollbars相关属性只对Firefox高于64以上的版本有效，想兼容全版本可以用jquery.nicescroll这个插件，具体用法可以看官方文档。
参考：
开发工具
