移动端默认不显示滚动条且iOS Safari不支持自定义样式，可通过::-webkit-scrollbar适配Android浏览器，在支持的设备上设置滚动条宽度、轨道和滑块样式；为提升体验，推荐隐藏原生滚动条并保留滚动行为，使用overflow-scrolling: touch实现平滑滚动，结合scrollbar-width和-ms-overflow-style或::-webkit-scrollbar { display: none }隐藏各类浏览器滚动条；若需统一视觉效果，可引入SimpleBar或OverlayScrollbars等JS库，自动适配触屏设备，在Android显示自定义滚动条，iOS则退化为无滚动条但可滑动的设计，最终以交互提示如渐变、阴影引导用户感知可滚动区域。
移动端默认不显示滚动条，且对自定义滚动条样式的支持有限，尤其是在 iOS Safari 上。但通过一些适配方法，可以在支持的浏览器中实现接近预期的滚动条视觉效果。
1. 使用 Webkit 滚动条伪元素（适用于部分 Android 浏览器）
Android 上的 Chrome 和部分基于 Chromium 的浏览器支持 ::-webkit-scrollbar 伪元素，可以用来设置滚动条样式。
示例代码：
.container {
overflow-y: scroll;
height: 200px;
}
/* 仅在支持的移动端浏览器生效 */
.container::-webkit-scrollbar {
width: 6px;
}
.container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.container::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 3px;
}
.container::-webkit-scrollbar-thumb:hover {
background: #999;
}
⚠️ 注意：iOS Safari 完全忽略这些样式，不会显示任何自定义滚动条。
2. 利用 CSS 隐藏原生滚动条并模拟视觉效果
为提升移动端体验，更推荐隐藏滚动条但保留可滚动行为，通过内容设计让用户感知可滑动。
立即学习“前端免费学习笔记（深入）”；
- 使用 overflow: scroll 或 overflow-x/y: auto 启用滚动
- 添加 -webkit-overflow-scrolling: touch（仅 iOS，已废弃但仍有作用）
- 隐藏滚动条但保留功能（尤其适合横向滚动）
.scroll-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* 平滑滚动 */
scrollbar-width: none; /* Firefox 隐藏 */
-ms-overflow-style: none; /* IE/Edge */
}
.scroll-container::-webkit-scrollbar {
display: none; /* 隐藏 WebKit 滚动条 */
}
这样用户仍可通过触摸滑动，界面更简洁，符合移动端设计习惯。
3. 使用 JavaScript 库实现跨平台一致体验
如需精确控制滚动条外观（比如在 Android 显示细滚动条），可使用轻量级库：
- SimpleBar：包装容器，提供自定义滚动条，支持触摸拖动
- OverlayScrollbars：功能更强，兼容性好
<div class="scroll-container">
<div class="content">...长内容...</div>
</div>
<p><link rel="stylesheet" href="simplebar.css" />
<script src="simplebar.js"></script>
<script>
new SimpleBar(document.querySelector('.scroll-container'));
</script>
这类库会在支持的设备上显示美观滚动条，移动端则自动退化为隐藏式滚动，体验自然。
基本上就这些。移动端优先考虑“可滚动”的交互暗示（如阴影、渐变、手势提示），而非依赖滚动条视觉。自定义样式主要服务于 Android Chrome，iOS 保持原生行为最稳妥。
