修改浏览器滚动条

前端通过css来修改浏览器中滚动条的样式
适用于Chrome、edge等大部分浏览器

在css中使用伪元素对其进行样式定义

• 整体滚动条： ::-webkit-scrollbar
• 滚动条轨道： ::-webkit-scrollbar-track
• 滚动条滑块： ::-webkit-scrollbar-thumb

::-webkit-scrollbar {
  width: 14px;
  height: 14px;
  background-color: #f5f5f5;
}

/*定义滚动条轨道*/
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ffffff;
  -webkit-box-shadow: none;
}

/*定义滑块*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #FF0000;
  -webkit-box-shadow: none;
  border: 4px solid transparent;
  background-clip: padding-box;
  cursor: pointer;
}