美化滚动条

浏览器原生的滚动条真的是太过僵硬，想要自然一点，只能自己动手美化一下

效果展示

<div class="scroll-container">
  <div class="scroll-content"></div>
</div>

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  border-radius: 3px;
}

/* 滚动条滑块（里面小方块） */
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.1);
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  border-radius: 3px;
  background: rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-track-piece {
  background-color: rgba(0, 0, 0, 0);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

.scroll-container {
  width: 100%;
  height: 200px;
  overflow: auto;
}

.scroll-content {
  width: 100%;
  height: 400px;
}

实现思路

滚动条相关的样式大多有兼容性问题，而国内的一些教程网站这方面做到都不太行，不如直接查阅 MDN，这里的资料更加完善些

实现代码

由于我主要使用的浏览器是 Chrome 浏览器和 Edge 浏览器，主要参考这两个浏览器的显示效果进行编码，对于其他浏览器的兼容性处理，在后面

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  border-radius: 3px;
}

/* 滚动条滑块（里面小方块） */
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.1);
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  border-radius: 3px;
  background: rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-track-piece {
  background-color: rgba(0, 0, 0, 0);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

代码解释

• ::-webkit-scrollbar：整个滚动条
• ::-webkit-scrollbar-button：滚动条上的按钮 (上下箭头)
• ::-webkit-scrollbar-thumb：滚动条上的滚动滑块
• ::-webkit-scrollbar-track：滚动条轨道
• ::-webkit-scrollbar-track-piece：滚动条没有滑块的轨道部分
• ::-webkit-scrollbar-corner：当同时有垂直滚动条和水平滚动条时交汇的部分
• ::-webkit-resizer：某些元素的 corner 部分的部分样式

火狐浏览器兼容问题

上面的样式效果都主要是参考 Chrome 浏览器，而 Firefox 浏览器对于上面的样式代码并不兼容，导致 Firefox 浏览器的滚动条需要单独处理

* {
  scrollbar-color: #c8d2e0 #f3f4f9;
  scrollbar-width: thin;
}

代码解释

需要注意的是，下面这些属性只兼容 Firefox 浏览器，在其他浏览器是不会到达你设置的效果

• scrollbar-color：滚动条相关颜色设置
  • 第一个值：滑块颜色
  • 第二个值：滚动条背景颜色
• scrollbar-width：滚动条的宽度
  • thin：比默认滚动条宽度更细
  • auto：默认的滚动条宽度
  • none：隐藏滚动条，但滚动条依旧可以滚动

参考

MDN ::-webkit-scrollbar