CSS之设置滚动条样式

浏览器上的滚动条样式比较难看,想调整成更舒服的模样,例如 就需要通过CSS样式来控制

::webkit-scroller 设置滚动条的整体样式,其实只需要width属性就可以

::webkit-scroller-track 设置滚动条的滑道样式,背景色浅色,添加圆角更柔和

::webkit-scroller-thumb 设置滚动块的样式,设置与滑道相同的圆角,背景色稍深,在鼠标移入时添加背景色的变化动画

优化后的滚动条将具有以下特点：

1. 更窄的宽度：8px宽度更节省空间

2. 圆角设计：轨道和滑块都带有4px圆角

3. 平滑过渡：悬停时颜色渐变

4. 中性配色：灰色系与常见UI风格协调

5. 响应式高度：垂直滚动条高度自动适应

.container {
  padding: 10px;
  min-height: 100px;
  max-height: 100px;
  overflow-y: auto;

  /* 滚动条整体样式 */
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  /* 滚动条轨道 */
  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
  }

  /* 滚动条滑块 */
  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
    transition: background 0.3s;

    &:hover {
      background: #a8a8a8;
    }
  }
}