首先各个浏览器滚动条保持统一是不可能的，因为浏览器不支持大多数滚动条样式属性
从支持可调整的角度来看，我们一般选择
- 保持chrome样式，其他浏览器样式使用默认效果
- 保持chrome、火狐样式一致，其他浏览器样式使用默认效果
所以这里有二个方案自行选择
方案一
保持chrome样式，其他浏览器样式使用默认效果
（通常采用这个方案）
使用该方法就不要在非伪元素中使用 scrollbar-width:thin; 因为该属性会强行修改样式，导致自定义样式没有效果，虽然它在火狐浏览器中，让滚动条好看，苗条了些；
/*定义整个滚动条高宽及背景：高宽分别对应横竖滚动条的尺寸*/
&::-webkit-scrollbar {width:10px;background-color:#F5F5F5;
}
/*定义滚动条轨道：内阴影+圆角*/
&::-webkit-scrollbar-track {background-color:#F5F5F5;
}
/*定义滑块：内阴影+圆角*/
&::-webkit-scrollbar-thumb {border-radius:10px;background-color:#555;
}
当然可以自己写滚动条，不采用系统自带的，当然比较麻烦吧！！！
想搞一下的，可以参考 有道文档翻译 阅读界面中，滚动条效果
方案二
保持chrome、火狐样式一致，其他浏览器样式使用默认效果
这种方法可调整样式固定，没有圆角，美感一般
&::-webkit-scrollbar {width: 6px;background-color: #eee;
}&::-webkit-scrollbar-thumb {background-color: #c1c1c1;&:hover {background-color: #a8a8a8;}&:active {background-color: #787878;}
}& {scrollbar-width: thin;scrollbar-color: #c1c1c1 #eee;
}
Firefox
火狐64位目前只提供了部分自定义滚动条的属性：
scrollbar-width：该属性可取值：
scrollbar-width: auto; // 默认值
scrollbar-width: thin; // 比默认滚动条窄
scrollbar-width: none; // 不显示滚动条，但是仍可以滚动
scrollbar-color：其可填写的值有：
scrollbar-color: auto; // 默认值
scrollbar-color: dark; // 无效果
scrollbar-color: light; // 无效果
scrollbar-color: red green; // 第一个滚轮颜色，第二个滚动条背景色
