css 设置滚动条样式

/* 滚动条 */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background: transparent;
  border-radius: 5px;
}

/* 滚动条两端按钮 */
::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}

/* 外层轨道 */
::-webkit-scrollbar-track {
  border-radius: 5px;
}

/* 内层轨道,它会覆盖外层轨道的样式 */
::-webkit-scrollbar-track-piece {
  width: 4px;
  margin: 0 -2px 0;
}

/* 滑块 */
::-webkit-scrollbar-thumb {
  background-color: #ccc;
  min-height: 60px;
  min-width: 60px;
  border-radius: 5px;
}

/* 纵向滑块悬浮 */
::-webkit-scrollbar-thumb:vertical:hover {
  background-color: #333;
}

/* 横向滑块悬浮 */
::-webkit-scrollbar-thumb:horizontal:hover {
  background-color: #333;
}

 

posted @ 2021-07-01 16:20  JS-Feng  阅读(712)  评论(0编辑  收藏  举报