HOW-在Windows浏览器中模拟MacOS的滚动条

目录 一、原生 CSS 代码实现模拟 macOS 滚动条额外优化应用到某个特定容器 二、Antd table中的滚动条场景三、使用第三方工具/扩展

如果你想让 Windows 里的滚动条 模拟 macOS 的效果（细窄、圆角、隐藏默认轨道）。

可以使用以下几种方案：

一、原生 CSS 代码实现 模拟 macOS 滚动条 /* 整个滚动条 */ ::-webkit-scrollbar { width: 6px; /* 细窄滚动条 */ height: 6px; } /* 滚动条的轨道（macOS 是透明的，所以这里隐藏掉） */ ::-webkit-scrollbar-track { background: transparent; /* 透明背景 */ } /* 滚动条滑块 */ ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.3); /* 半透明黑色 */ border-radius: 10px; /* 圆角 */ } /* 滑块悬停状态 */ ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.5); /* 鼠标悬停时更明显 */ } 额外优化

macOS 的滚动条默认是 在滚动时才出现，你可以用 overflow: auto; + scrollbar-gutter 让它更接近 macOS：

.custom-scroll { overflow-y: auto; scrollbar-gutter: stable; /* 让内容不跳动 */ }

如果你希望在 不滚动时隐藏滚动条，可以用：

::-webkit-scrollbar { display: none; }

⚠️ 注意：这样会完全隐藏滚动条，用户无法手动拖动滚动条，建议仅在特殊场景下使用。

应用到某个特定容器

如果你不想全局生效，只想对某个 div 应用 macOS 风格：

.macos-scrollbar { overflow-y: auto; } .macos-scrollbar::-webkit-scrollbar { width: 6px; } .macos-scrollbar::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.3); border-radius: 10px; }

然后在 HTML 里：

<div class="macos-scrollbar" style="height: 300px; overflow-y: auto;"> 这里是很多很多的内容... </div>

这样，Windows 上的滚动条就会变得像 macOS 一样 细窄、圆润、隐蔽，更加美观。

二、Antd table中的滚动条场景

在使用一些组件库如 Antd 时，内部组件存在滚动场景时，如table组件，会发现滚动条没生效，这里需要设置：

.ant-table-wrapper .ant-table { scrollbar-color: unset; }

因为通过定位元素可以发现table自己设置了 scrollbar-color 属性。

三、使用第三方工具/扩展

对于 React 项目，可以通过以下 GitHub 工具实现滚动条的自定义（尤其是模拟 macOS 风格），以下是推荐的高质量工具：

react-custom-scrollbars

github /malte-wessel/react-custom-scrollbars

OverlayScrollbars

github /KingSora/OverlayScrollbars

react-perfect-scrollbar

github /mdbootstrap/perfect-scrollbar

smooth-scrollbar-react

github /nghiepdev/smooth-scrollbar-react

simplebar-react

github /grsmto/simplebar