chrome/edge 可用 ::-webkit-scrollbar 模拟 macos 滚动条外观，需配合 track/thumb 伪元素、8px 宽度、999px 圆角、transparent 背景及 opacity 过渡实现悬停显隐；safari 16.4+ 仅支持 scrollbar-width/thin 和 scrollbar-color，不支持圆角与过渡；firefox 完全不支持自定义样式，跨浏览器“苹果感”核心在于惯性滚动与 scroll-behavior: smooth 的协同。
Chrome / Edge 中用 ::-webkit-scrollbar 模拟苹果滚动条外观
macOS 原生滚动条是「悬停出现、无边框、圆角、半透明、拖拽区域细长」，而 Chromium 内核浏览器（Chrome、Edge、新版 Opera）支持 ::-webkit-scrollbar 伪元素定制。但注意：它只能改样式，不能复刻 macOS 的「悬停显示」逻辑——滚动条默认常驻，需配合 CSS opacity 和 transition 模拟淡入效果。
关键点：
-
::-webkit-scrollbar必须配合::-webkit-scrollbar-track和::-webkit-scrollbar-thumb一起写，缺一不可，否则部分版本会完全禁用自定义 - thumb 宽度建议设为
8px，圆角用border-radius: 999px（比4px更接近 macOS 的柔和弧度） - track 背景必须设为
transparent或与页面背景一致，否则会出现灰色底块 - 要实现「悬停显隐」，得给
::-webkit-scrollbar设opacity: 0，再用:hover触发父容器（如body）上的::-webkit-scrollbar显隐
body {
overflow-y: scroll;
}
body::-webkit-scrollbar {
width: 8px;
opacity: 0;
transition: opacity 0.2s;
}
body:hover::-webkit-scrollbar,
body:active::-webkit-scrollbar {
opacity: 1;
}
body::-webkit-scrollbar-track {
background: transparent;
}
body::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
border-radius: 999px;
}
body::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.3);
}
Safari 16.4+ 支持 scrollbar-width 和 scrollbar-color，但不支持圆角
Safari 自 16.4 起开始支持标准 CSS 滚动条属性，但仅限于宽度和颜色控制：scrollbar-width: thin 可触发类似 macOS 的窄滚动条（仅在 macOS Safari 上生效），scrollbar-color: #666 #fff 控制 thumb 和 track 颜色。但它完全忽略 border-radius、transition 等样式，也无法隐藏/显示。
所以如果你只写：
html {
scrollbar-width: thin;
scrollbar-color: rgba(0,0,0,0.2) transparent;
}
在 Safari 上会得到一个细、无圆角、常驻、不可交互淡入的滚动条——这是它的原生行为，无法绕过。
Firefox 完全不支持任何滚动条样式定制
Firefox 目前（截至 v128）仍不支持 ::-webkit-scrollbar，也不支持 scrollbar-width 以外的任何样式声明。即使你写了 scrollbar-color，它也只影响 auto 模式下的颜色（且仅限于某些系统主题）。换句话说：在 Firefox 中，滚动条永远是系统原生样式，无法圆滑、无法隐藏、无法调色。
若强行统一体验，唯一可行路径是用 JavaScript 实现自定义滚动条（如 simplebar 或 overlay-scrollbars），但会带来额外 DOM 节点、滚动事件重绑定、焦点管理等复杂问题，且可能破坏 scroll-behavior: smooth 或 scroll-snap 行为。
真正跨浏览器「圆滑感」靠的是行为，不是外观
用户感知的「苹果风格滚动」，70% 来自惯性滚动（momentum scrolling）和 scroll-behavior: smooth 的协同，而非滚动条本身。macOS 上所有滚动都带弹性回弹和速度衰减，而 Windows/Linux 默认没有。
所以更务实的做法是：
- 对
html, body设置scroll-behavior: smooth - 确保容器有
overscroll-behavior: contain防止滚到底还触发刷新 - 避免在滚动容器上监听
scroll并做重排（如实时计算 top 值），这会打断浏览器原生滚动流畅度 - 如果必须用 JS 滚动（如锚点跳转），优先用
element.scrollIntoView({ behavior: 'smooth' })而非window.scrollTo手动插值
滚动条只是表象；滚动本身的物理感，才是用户真正记住「像苹果」的地方。而这一点，恰恰没法用 CSS 圆角修出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
