WHAT - 滚动条 css scrollbar-* 属性

目录

• [1. 基础属性](#1. 基础属性)
• • `scrollbar-width`
  • `scrollbar-color`
• [2. WebKit 浏览器专用属性（Chrome/Safari）](#2. WebKit 浏览器专用属性（Chrome/Safari）)
• • 结构说明
  • 完整示例
• [3. 跨浏览器兼容方案](#3. 跨浏览器兼容方案)
• • 统一写法（现代浏览器）
• [4. 高级技巧](#4. 高级技巧)
• • 自定义滚动条形状
  • 滚动条动画
  • 为特定元素单独设置
• [5. 实现 macOS 风格滚动条](#5. 实现 macOS 风格滚动条)
• [6. 注意事项](#6. 注意事项)

学习 CSS 的 scrollbar-* 属性可以帮助你直接通过原生样式自定义浏览器的滚动条外观，无需依赖第三方库。以下是详细的属性说明和示例：

1. 基础属性

scrollbar-width

• 作用: 设置滚动条的宽度。

• 值 : auto（默认）、thin（细滚动条）、none（隐藏滚动条）。

• 示例 :

  /* 隐藏滚动条但保留滚动功能 */
  .container {
    scrollbar-width: none;
  }
  
  /* 显示细滚动条 */
  .container {
    scrollbar-width: thin;
  }

scrollbar-color

• 作用: 设置滚动条滑块（thumb）和轨道（track）的颜色。

• 值 : rgb() | rgba() | hex | hsl() | keyword。

• 示例 :

  .container {
    scrollbar-color: #d3d3d3 #f5f5f5; /* 滑块颜色  轨道颜色 */
  }

2. WebKit 浏览器专用属性（Chrome/Safari）

WebKit 使用伪元素 ::-webkit-scrollbar 来定制滚动条样式：

结构说明

/* 整个滚动条容器 */
::-webkit-scrollbar {
  width: 8px;         /* 横向滚动条宽度，纵向滚动条高度 */
  height: 12px;        /* 纵向滚动条高度 */
}

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

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #d3d3d3;
  border-radius: 6px;
  transition: background 0.2s ease;
}

/* 滚动条滑块悬停状态 */
::-webkit-scrollbar-thumb:hover {
  background: #a0a0a0;
}

完整示例

/* 针对纵向滚动条 */
.container {
  overflow-y: auto;
  height: 300px;
}

/* WebKit 自定义滚动条 */
.container::-webkit-scrollbar {
  width: 8px;
}

.container::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 6px;
}

.container::-webkit-scrollbar-thumb {
  background: #d3d3d3;
  border-radius: 6px;
}

.container::-webkit-scrollbar-thumb:hover {
  background: #a0a0a0;
}

3. 跨浏览器兼容方案

由于不同浏览器对 scrollbar-* 属性的支持不一致，建议结合以下方法：

统一写法（现代浏览器）

/* 隐藏滚动条但保留滚动功能 */
.hide-scrollbar {
  scrollbar-width: none;  /* Firefox */
  scrollbar-color: transparent transparent; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  overflow: -moz-scrollbars-none; /* Firefox */
}

/* WebKit 浏览器隐藏滚动条 */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

4. 高级技巧

自定义滚动条形状

通过 border-radius 实现圆形滚动条：

::-webkit-scrollbar-thumb {
  border-radius: 50%; /* 圆形滑块 */
}

滚动条动画

为滑块添加过渡效果：

::-webkit-scrollbar-thumb {
  transition: background 0.3s ease;
}

为特定元素单独设置

只针对某个容器生效：

#my-list {
  overflow-y: auto;
  /* 自定义滚动条样式... */
}

5. 实现 macOS 风格滚动条

结合上述属性，模拟 macOS 的细长滚动条和悬停效果：

/* 容器样式 */
.macos-scrollbar {
  overflow-y: auto;
  height: 400px;
}

/* WebKit 自定义 */
.macos-scrollbar::-webkit-scrollbar {
  width: 12px;
}

.macos-scrollbar::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 6px;
}

.macos-scrollbar::-webkit-scrollbar-thumb {
  background: #d3d3d3;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.macos-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #a0a0a0;
}

/* Firefox 兼容 */
.macos-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #d3d3d3 #f5f5f5;
}

在 HOW - 在Windows浏览器中模拟MacOS的滚动条 中我们也介绍过。

6. 注意事项

1. 浏览器兼容性:

   • 注意浏览器是否支持 scrollbar-width 和 scrollbar-color。
   • Chrome/Safari 可通过 ::-webkit-scrollbar 伪元素。
   • Edge/IE 不推荐使用原生滚动条样式，建议通过第三方库统一处理。

2. 隐藏滚动条:

   • 使用 overflow: hidden 会禁用滚动，需谨慎！

通过以上方法，你可以完全掌控滚动条的外观和行为，适配现代浏览器的需求。假如希望引入一些第三方库来实现，可以阅读 HOW - 在Windows浏览器中模拟MacOS的滚动条。