定义滚动条样式——按钮、轨道、滑块

效果图

代码

::-webkit-scrollbar{
  width: 15px;
  height: 25px;
}
::-webkit-scrollbar:hover{
  background-color: rgb(237, 237, 237);
}



::-webkit-scrollbar:single-button{
  display: block;
  width: 25px;
  height: 25px;
  border-radius: 1px;
  background-color: black;
  // border: 1px solid red !important;
}
//水平按钮 左
::-webkit-scrollbar-button:horizontal:start {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M14 7l-5 5 5 5z"/></svg>') no-repeat center;
  background-size: contain;
  // display: block;
  width: 40px;
}
::-webkit-scrollbar-button:horizontal:start:hover {
  border: 1px solid rgb(196, 196, 196);
}

//水平按钮 右

::-webkit-scrollbar-button:horizontal:end {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M10 7l5 5-5 5z"/></svg>') no-repeat center;
  background-size: contain;
  // display: block;
  width: 40px;
}
::-webkit-scrollbar-button:horizontal:end:hover {
  border: 1px solid rgb(196, 196, 196);
}