上海网站建设价,营销型和展示型网站的区别,31省份本土新增今天,哈尔滨建设网官方网站目录 一、原生 CSS 代码实现模拟 macOS 滚动条额外优化应用到某个特定容器 二、Antd table中的滚动条场景三、使用第三方工具/扩展 如果你想让 Windows 里的滚动条 模拟 macOS 的效果#xff08;细窄、圆角、隐藏默认轨道#xff09;。
可以使用以下几种方案#xff1a;
一… 目录 一、原生 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 classmacos-scrollbar styleheight: 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
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
