scrollbar-width: none在移动端基本无效，因仅Firefox for Android支持，iOS Safari（16.4+仅部分场景）、Chrome/Edge/三星Internet等主流浏览器均不支持；可靠方案是::-webkit-scrollbar伪元素配合width: 0、background: transparent及-webkit-overflow-scrolling: touch。
移动端用 scrollbar-width: none 隐藏滚动条基本无效——它在 Firefox for Android 上能用，但 Chrome for Android、iOS Safari、三星 Internet 等主流移动浏览器完全不支持该属性。
为什么 scrollbar-width: none 在移动端几乎没用
这个属性是 Firefox 专属，且只对 Firefox for Android 生效；其他所有移动端浏览器（包括 Chrome、Edge、Safari、UC、QQ 浏览器）均无视它。写在 html 或 body 上也不会触发任何隐藏行为。
- Firefox for Android：支持，但需配合
overflow: auto或scroll才生效 - iOS Safari：从 iOS 16.4 开始实验性支持，但仅限部分场景，且常被系统策略覆盖
- Chrome/Edge for Android：完全不识别
scrollbar-width - 定制 ROM 浏览器（如三星 Internet）：普遍忽略该声明，无 fallback 行为
::-webkit-scrollbar 是移动端唯一可靠路径
所有基于 WebKit/Blink 的移动端浏览器（即绝大多数）只认 ::-webkit-scrollbar 系列伪元素。但直接写 display: none 在旧版 Safari（iOS 15 及更早）会失效，必须降级处理。
- 必须给容器设
overflow: auto或scroll，否则伪元素根本不渲染 - 不能只写
::-webkit-scrollbar { display: none; }—— iOS 15- 会漏出轨道残影 - 稳妥写法是：设
width: 0+height: 0+background: transparent三重清空 - 加
-webkit-overflow-scrolling: touch防止 iOS Safari 滚动卡顿或闪出原生条
.scrollable {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.scrollable::-webkit-scrollbar {
width: 0;
height: 0;
}
.scrollable::-webkit-scrollbar-track,
.scrollable::-webkit-scrollbar-thumb {
background: transparent;
border: none;
}隐藏后内容右侧被“吃掉”怎么办
滚动条原本占的空间（通常 12–17px）消失后，内容会右移，导致最后一列文字或图标被裁切。这不是 bug，是预期行为。
立即学习“前端免费学习笔记（深入）”；
- 最简方案：
padding-right: 15px补偿（Windows Chrome 常见宽度） - 更健壮方案：
padding-right: calc(100% - 100vw)，动态计算滚动条宽度（但兼容性略差） - 若容器本身有
box-sizing: border-box，补 padding 不影响布局逻辑 - 别用
margin-right替代——它不参与盒模型内边距计算，无法对齐内容边界
真正难处理的不是写法，而是 iOS Safari 隐藏后首次轻扫不触发惯性滚动、屏幕阅读器可能跳过透明伪元素、以及某些安卓 WebView 对 -webkit-overflow-scrolling 的废弃警告——这些没法靠一行 scrollbar-width 绕过去。
