Mac滚动条默认为“仅在滚动时显示”，宽度约12px、半透明无边框、滑块圆角明显，属系统级UI策略；CSS无法强制常驻显示，仅能通过::-webkit-scrollbar微调WebKit浏览器下出现时的样式。
Mac系统下滚动条默认行为是什么
Mac的滚动条默认是「仅在滚动时显示」，且宽度极窄（约12px），颜色半透明、无边框，滑块圆角明显。这不是CSS能直接模拟的「样式」，而是系统级UI策略——浏览器会尊重系统偏好，overflow: auto 在macOS Safari/Chrome/Firefox中天然表现为「隐藏式滚动条」，但仅限于触控板或鼠标滚轮触发时临时浮现。
关键点在于：你无法用CSS强制让Mac用户看到常驻滚动条，但可以控制它「何时出现」「出现时长」「是否可交互」。
如何用CSS覆盖默认滚动条样式（仅限WebKit内核）
只有基于WebKit的浏览器（Safari、Chrome、Edge）支持::-webkit-scrollbar系列伪元素。Firefox不支持，所以这个方案本质是「对WebKit用户的精细化干预」，不是跨浏览器统一解法。
常见错误现象：::-webkit-scrollbar写了但没生效
原因通常是：
- 父容器未设置
overflow: auto或overflow-y: scroll - 伪元素选择器写错，比如漏掉
:-webkit-前缀，或用了::-webkit-scrollbar-track但没配::-webkit-scrollbar基础声明 - 设置了
width: 0却忘了加display: none（仅设width为0仍占布局空间）
极简Mac风格实现示例（仅影响WebKit）：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
.scroll-container {
overflow-y: auto;
}
<p>.scroll-container::-webkit-scrollbar {
width: 8px; /<em> 比系统默认略细，更“隐形” </em>/
}</p><p>.scroll-container::-webkit-scrollbar-track {
background: transparent;
}</p><p>.scroll-container::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
border-radius: 4px;
transition: background-color 0.2s;
}</p><p>.scroll-container::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.3);
}注意：transition只对hover有效；rgba(0,0,0,0.2)比系统默认更淡，避免突兀；border-radius: 4px匹配macOS滑块圆角。
为什么不能用overflow: overlay
overflow: overlay曾是Chrome早期实验性属性，意图实现「不占布局空间的滚动条」，类似Mac行为。但它已被完全移除（Chrome 92+废弃，现无效）。现在任何尝试设置overflow: overlay都会被忽略，回退到auto或scroll。不要在代码里留它，也不要在文档里当正解提。
替代思路只有两个：
- 接受系统默认行为（推荐）：不写任何滚动条CSS，让
overflow: auto自然响应macOS偏好 - 用
::-webkit-scrollbar微调WebKit表现，但明确知道Firefox/Safari技术预览版等场景不生效
滚动条是否显示，真正由什么控制？
决定滚动条是否「常驻」或「仅滚动时出现」的，是用户系统设置，不是你的CSS。macOS用户可在「系统设置 > 辅助功能 > 显示 > 滚动条」中选择：
- 「仅在滚动时显示」（默认）
- 「始终显示」
- 「自动隐藏」（旧版表述）
你的CSS只能影响「它出现时长什么样」，不能绕过这个开关。试图用overflow: scroll强制显示，只会让非Mac用户看到常驻滚动条，而Mac用户依然遵循系统设置——这是最容易被忽略的前提。
