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

目录

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

可以使用以下几种方案:

一、原生 CSS 代码实现

模拟 macOS 滚动条

css 复制代码
/* 整个滚动条 */
::-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:

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

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

css 复制代码
::-webkit-scrollbar {
  display: none;
}

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

应用到某个特定容器

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

css 复制代码
.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 里:

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

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

二、Antd table中的滚动条场景

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

css 复制代码
.ant-table-wrapper .ant-table {
    scrollbar-color: unset;
}

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

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

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

  • react-custom-scrollbars

https://github.com/malte-wessel/react-custom-scrollbars

  • OverlayScrollbars

https://github.com/KingSora/OverlayScrollbars

  • react-perfect-scrollbar

https://github.com/mdbootstrap/perfect-scrollbar

  • smooth-scrollbar-react

https://github.com/nghiepdev/smooth-scrollbar-react

  • simplebar-react

https://github.com/grsmto/simplebar

相关推荐
郝学胜-神的一滴8 分钟前
Cesium绘制线:从基础到高级技巧
前端·javascript·程序人生·线性代数·算法·矩阵·图形渲染
猫头虎20 分钟前
解决升级IDEA2025.2后,每次打开Maven项目爆红的问题:Windows和Mac解决方案
java·ide·macos·maven·intellij-idea·idea·intellij idea
蒙奇D索大39 分钟前
【计算机网络】408计算机网络高分指南:物理层编码与调制技术精讲
java·前端·学习·计算机网络
无盐海1 小时前
CSRF漏洞攻击(跨站请求伪造攻击)
前端·csrf
白玉cfc1 小时前
【iOS】KVC 与 KVO 的基本了解与使用
macos·ios·objective-c·cocoa
慧一居士1 小时前
CSS3 全部功能点介绍,使用场景,对应功能点完整使用示例
前端
烛阴1 小时前
深入Lua包(Package)与依赖管理
前端·lua
马拉萨的春天1 小时前
谈谈你对iOS的runtime和runloop的了解
macos·ios·cocoa
IT_陈寒1 小时前
5个Vue3性能优化技巧,让你的应用提速50% 🚀(附实测对比)
前端·人工智能·后端
god001 小时前
chromium项目中添加源文件(BUILD.gn项目中添加源文件)
java·服务器·前端