前端-浏览器滚动条样式终极方案

首先各个浏览器滚动条保持统一是不可能的，因为浏览器不支持大多数滚动条样式属性

从支持可调整的角度来看，我们一般选择

• 保持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; // 第一个滚轮颜色，第二个滚动条背景色