修改浏览器滚动条样式

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

浏览器样式有时候在项目里会显得很丑，而且会占用空间

例如：后台管理系统使用表格的时候。滚动条的宽度太多会显示的表格很丑

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、设置全局滚动条隐藏

代码如下（示例）：

::-webkit-scrollbar {
  display: none;
}

二、修改滚动条宽高

代码如下（示例）：

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

三、修改滚动条滑块样式

代码如下（示例）：

::-webkit-scrollbar-thumb {
  background-color: rgba(50,50,50,0.25); 
  border: 滑块边框;
  border-radius: 滑块圆角;
}

四、修改滚动条轨道样式

方便设置滑块下面的背景颜色，一般比滑块颜色要浅
代码如下（示例）：

::-webkit-scrollbar-track {
  background-color: rgba(50,50,50,0.05);
}

五、修改滚动条上下按钮

代码如下（示例）：

::-webkit-scrollbar-button {
  
}

---

总结

希望对小伙伴们有所帮助。