设置滚动条样式。

浏览器默认的滚动条样式太丑了，有些场景使用默认的滚动条显得很不搭。 代码复制直接用，自行调整

/* 滚动条整体样式,滚动条所在容器 */
.wrap::-webkit-scrollbar {
  /*高宽分别对应横竖滚动条的尺寸*/
  width: 5px;
  height: 3px; /* 高度写不写，都不影响，因为会根据内容的长度自动计算 */
}

/* 滚动条里面小方块 */
.wrap::-webkit-scrollbar-thumb {
  border-radius: 3px; // 滑块圆角
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #00dfff; // 滑块颜色
}

/* 滚动条里面轨道 */
.wrap::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 3px; // 轨道圆角
  background: #ededed; // 轨道颜色
}

这样一个普通的自定义滚动条就好了，颜色和大小根据实际情况自行调整

还可以进行美化，设置鼠标移入滚动条滑块后的颜色

.wrap::-webkit-scrollbar-thumb:hover {
   background: #f40; // 鼠标移入滑块变红
 }