WHAT - 滚动条 css scrollbar-* 属性

学习 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的滚动条。