如何通过CSS修改浏览器的滚动条样式？

       滚动条，每个前端工程师都会遇到的一个组件，当你固定好盒子的高度设置了overflow-y:scroll或overflow-x:scroll后，只要内容超过了宽高就能够看的到它，就像下图一样：

修改前的默认样式

       因为觉得自带的滚动条显得有些“笨笨”的，所以在查阅资料后，我找到了通过CSS修改滚动条样式的方法，分享给可能也想要修改的大家。

/* 定义滚动条轨道 */
::-webkit-scrollbar {
  width: 1px; /* 设置滚动条宽度 */
}

/* 定义滚动条的轨道背景 */
::-webkit-scrollbar-track {
  background: transparent; /* 设置滚动条轨道背景颜色 */
}

/* 定义滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #dcdcdc; /* 设置滚动条滑块颜色 */
}

/* 定义滚动条滑块悬停时的样式 */
::-webkit-scrollbar-thumb:hover {
  background: #dcdcdc; /* 设置滚动条滑块悬停时的颜色 */
}

CSS代码

按上述CSS修改后的样式

       如果有想要修改的部分，按照这四个选择器写入特定的样式就能够满足要求了，快去试试吧。