css修改谷歌浏览器和火狐浏览器的滚动条样式

css代码

谷歌浏览器滚动条样式：

::-webkit-scrollbar {
  background: #f7f7f9;
  width: .08rem;  /* 纵向滚动条滑块宽度 */
  height: .09rem; /* 横向滚动条滑块宽度 */
}
::-webkit-scrollbar-track-piece { /*滚动条背景颜色*/
  background: #f7f7f9;
}
::-webkit-scrollbar-thumb { /* 滑块 */
  border-radius: .1rem;
  background: #e5e5e5;
}
// 也可以单独设置横向滚动条和纵向滚动条的背景颜色
::-webkit-scrollbar-thumb:vertical { /* 纵向滑块 */
  background: #e5e5e5;
}
::-webkit-scrollbar-thumb:horizontal { /* 横向滑块 */
  background: #e5e5e5;
}

火狐浏览器滚动条样式：

* {
  scrollbar-color: #e5e5e5 #f7f7f9; /* 滑块颜色  滚动条背景颜色 */
  scrollbar-width: thin; /* 滚动条宽度有三种：thin、auto、none */
}

效果图
谷歌浏览器效果

火狐浏览器效果

其他浏览器
IE浏览器都不支持这些属性，所以在IE浏览器下滚动条没办法用css设置，其他浏览器暂时没试过，大家可以自己尝试。