前端实现：滚动条样式修改

谷歌展示如图所示

代码：

/*滚动条整体部分,必须要设置*/
::-webkit-scrollbar{
  width: 8px;
  height: 8px;
  background-color: transparent;
}
/*滚动条的轨道*/
::-webkit-scrollbar-track{
  background-color: transparent;
}
/*滚动条的滑块按钮*/
::-webkit-scrollbar-thumb{
  border-radius: 10px;
  background-color: rgb(7,61,92);
  box-shadow: inset 0 0 5px rgb(7,61,92);
}
/*滚动条的上下两端的按钮*/
::-webkit-scrollbar-button{
  height: 0;
  background-color: rgb(7,61,92);
}

// 两个滚动条的交汇处
::-webkit-scrollbar-corner{
  background-color: transparent;
}

/* IE 浏览器 */
div{
  /*三角箭头的颜色*/
  scrollbar-arrow-color: rgb(7,61,92);
  /*滚动条滑块按钮的颜色*/
  scrollbar-face-color: rgb(7,61,92);
  /*滚动条整体颜色*/
  scrollbar-highlight-color: rgb(12,23,35);
  /*滚动条阴影*/
  scrollbar-shadow-color: transparent;
  /*滚动条轨道颜色*/
  scrollbar-track-color: transparent;
  /*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
  scrollbar-3dlight-color:rgb(7,61,92);
  /*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
  scrollbar-darkshadow-color: rgb(7,61,92);
  /*滚动条基准颜色*/
  scrollbar-base-color: rgb(7,61,92);
}