跳至主要內容

美化滚动条

望间2022/1/7代码CSS滚动条大约 5 分钟

浏览器原生的滚动条样式通常比较单调且不符合现代设计美学。通过自定义CSS样式，使网页界面更加协调。

效果展示

<div class="scroll-container">
  <div class="scroll-content"></div>
</div>
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  border-radius: 3px;
}

/* 滚动条滑块（里面小方块） */
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.1);
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  border-radius: 3px;
  background: rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-track-piece {
  background-color: rgba(0, 0, 0, 0);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

.scroll-container {
  width: 100%;
  height: 200px;
  overflow: auto;
}

.scroll-content {
  width: 100%;
  height: 400px;
}

代码解析

滚动条美化主要通过CSS伪元素选择器实现，但不同浏览器对这些选择器的支持存在差异。

WebKit内核浏览器（Chrome、Edge、Safari）

::-webkit-scrollbar {
  width: 6px;   /* 垂直滚动条宽度 */
  height: 6px;  /* 水平滚动条高度 */
  border-radius: 3px; /* 滚动条圆角 */
}

/* 滚动条滑块（可拖动部分） */
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.1);
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  border-radius: 3px;
  background: rgba(0, 0, 0, 0);
}

/* 滚动条没有滑块的轨道部分 */
::-webkit-scrollbar-track-piece {
  background-color: rgba(0, 0, 0, 0);
  border-radius: 0;
}

/* 滚动条滑块悬浮效果 */
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2); /* 悬浮时颜色变深 */
}

WebKit浏览器提供了多个专门用于自定义滚动条的伪元素：

  • ::-webkit-scrollbar：整个滚动条的容器
  • ::-webkit-scrollbar-button：滚动条上的按钮（上下/左右箭头）
  • ::-webkit-scrollbar-thumb：滚动条上可拖动的滑块部分
  • ::-webkit-scrollbar-track：滚动条的轨道背景
  • ::-webkit-scrollbar-track-piece：滚动条上没有滑块的轨道部分
  • ::-webkit-scrollbar-corner：当同时存在垂直和水平滚动条时的交汇角落
  • ::-webkit-resizer：某些元素（如textarea）角落的调整大小控制器

Firefox浏览器

* {
  scrollbar-color: #c8d2e0 #f3f4f9;  /* 滑块颜色  轨道颜色 */
  scrollbar-width: thin;  /* 滚动条宽度 */
}

Firefox使用两个标准CSS属性来控制滚动条样式：

  • scrollbar-color：设置滚动条的颜色
    • 第一个值：滑块颜色
    • 第二个值：滚动条背景颜色
  • scrollbar-width：设置滚动条的宽度，可选值有：
    • thin：比默认宽度更细的滚动条
    • auto：默认宽度的滚动条
    • none：隐藏滚动条，但内容仍然可以滚动

使用方法

自定义样式

你可以根据需要调整滚动条的各种样式属性，以匹配你的网站设计风格：

  1. 颜色自定义

    ::-webkit-scrollbar-thumb {
  background: rgba(100, 100, 100, 0.3); /* 自定义滑块颜色 */
}

* {
  scrollbar-color: rgba(100, 100, 100, 0.3) #f5f5f5; /* Firefox滑块和轨道颜色 */
}

  2. 尺寸调整

    ::-webkit-scrollbar {
  width: 8px;   /* 垂直滚动条宽度 */
  height: 8px;  /* 水平滚动条高度 */
}

* {
  scrollbar-width: thin; /* Firefox滚动条宽度 */
}

  3. 圆角设置

    ::-webkit-scrollbar {
  border-radius: 4px; /* 滚动条圆角 */
}

::-webkit-scrollbar-thumb {
  border-radius: 4px; /* 滑块圆角 */
}

::-webkit-scrollbar-track {
  border-radius: 4px; /* 轨道圆角 */
}

  4. 特定元素自定义

    /* 只为特定元素自定义滚动条 */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #888;
}

.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

    然后在HTML中为需要自定义滚动条的元素添加相应的类：

    <div class="custom-scrollbar">
  <!-- 可滚动内容 -->
</div>

完整示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>美化滚动条示例</title>
  <style>
    /* WebKit滚动条样式 */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
      border-radius: 3px;
    }
    
    ::-webkit-scrollbar-thumb {
      border-radius: 3px;
      background: rgba(0, 0, 0, 0.1);
    }
    
    ::-webkit-scrollbar-thumb:hover {
      background: rgba(0, 0, 0, 0.2);
    }
    
    ::-webkit-scrollbar-track {
      border-radius: 3px;
      background: rgba(0, 0, 0, 0);
    }
    
    ::-webkit-scrollbar-track-piece {
      background-color: rgba(0, 0, 0, 0);
      border-radius: 0;
    }
    
    /* Firefox滚动条样式 */
    * {
      scrollbar-color: #c8d2e0 #f3f4f9;
      scrollbar-width: thin;
    }
    
    /* 示例容器 */
    .scroll-example {
      width: 100%;
      max-height: 300px;
      overflow-y: auto;
      padding: 20px;
      box-sizing: border-box;
    }
    
    .content-section {
      height: 100px;
      margin-bottom: 20px;
      padding: 20px;
      background-color: #f8f9fa;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <div class="scroll-example">
    <div class="content-section">内容区块 1</div>
    <div class="content-section">内容区块 2</div>
    <div class="content-section">内容区块 3</div>
    <div class="content-section">内容区块 4</div>
    <div class="content-section">内容区块 5</div>
  </div>
</body>
</html>

浏览器兼容性

相关信息

  • 表格中的数字表示该浏览器开始支持的最低版本
  • "No" 表示该浏览器不支持此功能

PC 端

浏览器功能ChromeEdgeFirefoxOperaSafari
WebKit 滚动条样式479No153.1
Firefox 滚动条样式NoNo64NoNo
CSS 变量4915313610

注意事项

  1. 浏览器实现差异：虽然我们可以使用标准属性来定义滚动条样式，但为了兼容所有现代浏览器，建议同时使用带有前缀的属性
  2. 功能支持范围：不同浏览器对滚动条样式的支持程度不同，有些属性可能在某些浏览器中不生效
  3. 可访问性考虑：自定义滚动条样式可能会影响用户的可访问性体验，因此在使用时需要考虑这一点
  4. 浏览器限制：某些浏览器（如 Firefox）限制了可以自定义的滚动条元素数量
  5. 性能影响：复杂的滚动条样式可能会影响页面性能，特别是在长列表或内容频繁更新的场景下

参考

更新日志

2025/9/28 09:03
查看所有更新日志
  • 38e56-🐳 chore: 重构项目于
贡献者: ViewRoom