移动端无法显示或美化原生滚动条，因iOS Safari和多数Android浏览器主动禁用::-webkit-scrollbar；可行方案是接受无滚动条，或用JavaScript实现滚动进度条。
移动端滚动条默认不可见，::-webkit-scrollbar 失效
在 iOS Safari 和多数 Android 浏览器中，原生滚动条默认隐藏，且 ::-webkit-scrollbar 伪元素完全不生效——这不是 bug，而是浏览器主动限制。强行用 overflow: scroll + -webkit-overflow-scrolling: touch（已废弃）也只影响惯性滚动行为，不影响滚动条本身。
所以别试图“显示并美化原生滚动条”，这条路走不通。真正可操作的方向只有两个：要么接受无滚动条（推荐），要么自己实现一个轻量级滚动指示器。
用 scrollbar-width 和 scrollbar-color 控制 Firefox 滚动条
这两个属性仅在 Firefox 桌面版有效，对移动设备无效，但如果你的页面需兼顾桌面端调试或部分安卓 Chrome（极少数版本曾短暂支持），可以安全加一层兜底：
html {
scrollbar-width: thin; /* auto | thin | none */
scrollbar-color: #6c6c6c #f0f0f0; /* thumb track */
}注意：scrollbar-color 的第一个值是滑块（thumb）颜色，第二个是轨道（track）背景色；若设为 transparent 或与背景同色，视觉上就“消失”了——这反而是移动端更常用的做法。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
用 getBoundingClientRect() + scrollTop 实现滚动进度条
当需要给用户明确的滚动位置反馈（比如长表单、文档阅读页），自己画一条顶部进度条比强求原生滚动条更可靠、更可控：
- 监听
scroll事件，计算scrollTop / (scrollHeight - clientHeight) - 用
position: sticky或固定top: 0的<div>作为进度容器 - 动态设置其子元素
width百分比，避免重排，优先用transform: scaleX()
示例关键逻辑：
const bar = document.querySelector('.scroll-bar');
const container = document.scrollingElement || document.documentElement;
<p>container.addEventListener('scroll', () => {
const progress = container.scrollTop / (container.scrollHeight - container.clientHeight);
bar.style.transform = <code>scaleX(${Math.max(0.05, progress)})</code>;
});这里用 Math.max(0.05, progress) 是防止初始为 0 时进度条完全不可见。
禁用默认滚动条又保留滚动能力的写法
某些场景下（如横向轮播、自定义拖拽区域），你希望隐藏滚动条但不阻止滚动——不能只靠 overflow: hidden，那会直接禁掉滚动。正确组合是：
-
overflow: auto或scroll保证可滚动 -
scrollbar-width: none（Firefox） -
::-webkit-scrollbar { display: none }（Chrome/Edge/Safari 桌面） - 对 iOS / 移动端：额外加
padding-right: 0或margin-right: 0防止因隐藏滚动条导致内容错位（虽然它本就不占空间，但某些 WebKit 版本有渲染残留）
最终效果是：滚动正常，视觉干净，且不触发任何兼容性警告。真正的难点不在 CSS，而在判断哪些设备真的需要“进度提示”——多数情况下，用户根本不需要看到滚动条，只要滚动跟手、不卡顿，就是最好的体验。
