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

news2025/3/4 9:00:20

一、原生 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 一样 细窄、圆润、隐蔽，更加美观。

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

对于 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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2309406.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！