前端页面样式之滚动条样式修改

具体实现

实现代码

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  border-radius: 2px;
}

/*滚动区域背景*/
::-webkit-scrollbar-track-piece {
  background-color: #fcf9f8;
  -webkit-border-radius: 6px;
}

/*竖向滚动条*/
::-webkit-scrollbar-thumb:vertical {
  height: 5px;
  width: 5px;
  background-color: #D9E0FF;
  border-radius: 3px;
  -webkit-border-radius: 6px;
}

/*横向滚动条*/
::-webkit-scrollbar-thumb:horizontal {
  width: 5px;
  height: 5px;
  border-radius: 2px;
  background-color: #D9E0FF;
  -webkit-border-radius: 6px;
}