Safari桌面版支持-webkit-scrollbar自定义滚动条，需确保元素可滚动并使用::-webkit-scrollbar、track、thumb等伪元素设置样式，同时添加border:1px solid transparent等触发渲染；而移动端Safari不支持该特性，建议保持默认样式或用JavaScript模拟。
在Safari浏览器中，自定义滚动条样式需要特别注意兼容性写法。由于Safari对CSS滚动条样式的支持与其他基于Webkit的浏览器（如Chrome）略有不同，尤其是新版macOS系统中默认隐藏滚动条，只有在滚动时才显示，这会影响自定义样式的呈现效果。
使用-webkit-scrollbar伪元素适配Safari
Safari支持-webkit-scrollbar系列伪元素来修改滚动条样式，但必须确保目标元素本身具有可滚动的区域（即overflow: auto或scroll）。以下是基本结构：
- ::-webkit-scrollbar — 滚动条整体部分
- ::-webkit-scrollbar-track — 滚动条轨道
- ::-webkit-scrollbar-thumb — 滚动条滑块
- ::-webkit-scrollbar-corner — 两个滚动条交汇处角落
示例代码：
<style>
.container {
height: 200px;
overflow-y: scroll;
}
<p>.container::-webkit-scrollbar {
width: 12px;
}</p><p>.container::-webkit-scrollbar-track {
background: #f0f0f0;
border-radius: 10px;
}</p><p>.container::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 10px;
border: 3px solid #f0f0f0;
}</p></style>确保在Safari中始终显示滚动条
macOS Safari默认在非滚动状态下隐藏滚动条，导致自定义样式“看不见”。可通过以下CSS强制显示：
立即学习“前端免费学习笔记（深入）”；
.container {
-webkit-overflow-scrolling: touch; /* 提升滚动流畅度 */
}
更关键的是，在macOS Safari中，某些情况下需触发硬件加速或改变渲染方式才能激活伪元素。一个有效技巧是添加透明边框：
.container::-webkit-scrollbar {
width: 12px;
}
<p>/<em> 关键：让Safari识别并渲染滚动条 </em>/
.container {
scrollbar-width: thin; /<em> Firefox </em>/
scrollbar-color: #888 #f0f0f0; /<em> Firefox </em>/
}</p><p>/<em> 可选：增加一个隐藏边框以触发渲染 </em>/
.container {
border: 1px solid transparent;
}</p>移动端Safari注意事项
iOS上的Safari不支持-webkit-scrollbar，因此无法自定义滚动条外观。开发者应接受这一限制，或通过JavaScript模拟滚动容器（如使用第三方库如iScroll），但这会增加复杂度。
如果仅需视觉一致性，建议在移动端保持系统默认样式，避免强行干预用户体验。
基本上就这些。只要正确使用-webkit-scrollbar系列伪类，并确保元素可滚动、有足够高度差，Safari桌面版通常能正常显示自定义滚动条。关键是理解Safari对渲染的“懒加载”机制，适当添加触发条件即可生效。
