CSS修改滚动条样式：scrollbar

小半 • 2024年2月29日下午3:24 • 前端开发 • 阅读 395

前端页面中的列表数据超出屏幕，当我们给外层容器设置了overflow：scroll , 就可以通过滚动条滚动显示内容，但是web自带的滚动条样式不太美观，这时候我们就可以通过CSS设置来美化滚动条。

可以通过如下设置修改滚动条：

::-webkit-scrollbar ：可以设置滚动条的大小、颜色、圆角
::-webkit-scrollbar-thumb：设置滚动条的滑块
::-webkit-scrollbar-track：设置滚动条轨道（滑块可滑动区域）
::-webkit-scrollbar-track-piece：设置没有滑块的轨道部分
::-webkit-scrollbar-corner：设置水平和垂直滚动条交叉部分的背景色。
::-webkit-resizer：当元素设置为可拖动时（resize: horizontal | vertical | both），元素底角会出现可调整元素大小的滑块。
::webkit-scrollbar-button：设置滚动条两端的上下（左右）滚动按钮（上下、左右箭头）。

/* 修改滚动条样式 */
/* 设置滚动条 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #f5f5f5;
  border-radius: 5px;
}
 
/* 设置滚动条滑块 */
::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 5px;
}
 
/* 设置滚动条滑块在悬停状态下的背景色和圆角 */
::-webkit-scrollbar-thumb:hover {
  background-color: #999;
  border-radius: 5px;
}
 
/* 设置滚动条轨道的背景色和圆角 */
::-webkit-scrollbar-track {
  background-color: #f5f5f5;
  border-radius: 5px;
}
 
/* 设置滚动条轨道在悬停状态下的背景色和圆角 */
::-webkit-scrollbar-track:hover {
  background-color: #ccc;
}

::-webkit-scrollbar-corner{
  background-color: cyan;
}

::-webkit-scrollbar-track-piece{
  background-color: green;
}


::-webkit-resizer{
  background-color: rgb(242, 5, 151);
}
::-webkit-scrollbar-button{
  background-color: pink;
  border-radius: 20px;
  width: 20px;
}