overflow: hidden 会禁用滚动功能，无法实现“隐藏滚动条但保留滚动”；应使用浏览器前缀隐藏滚动条（如::-webkit-scrollbar、scrollbar-width）或采用css动画+transform方案。
直接设 overflow: hidden 不能真正“隐藏滚动条同时保留滚动功能”——它会直接禁用滚动，文字停住不动。你要的是“视觉上藏滚动条，但内容仍可滚动”，得用更精细的 CSS 控制。
为什么 overflow: hidden 不行
这个声明会切断所有溢出内容的显示，且彻底禁用用户滚动行为（包括鼠标滚轮、触摸拖拽、键盘方向键）。对滚动文字（比如 替代方案或 animation + transform 实现的跑马灯），它会让动画卡死或内容被裁切掉一部分。
常见错误现象：
• 文字只显示开头一截，后面全被砍掉
• 滚动动画不触发，@keyframes 似乎没生效
• 在 ios safari 上突然完全静止，连 touch 拖动都无效
CSS 掩藏滚动条但保留滚动能力（Webkit / firefox / IE）
核心思路：用伪元素或原生滚动条样式覆盖，而不是禁用滚动本身。不同浏览器需分别处理：
立即学习“前端免费学习笔记（深入）”；
- chrome / Safari / edge（基于 Webkit/Blink）：
用::-webkit-scrollbar设宽度为0或透明 - Firefox：
用scrollbar-width: none（仅支持auto/thin/none） - IE10+：
用-ms-overflow-style: none
示例代码（适用于包裹滚动文字的容器，如
）：
.marquee { overflow: auto; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE10+ */ } .marquee::-webkit-scrollbar { width: 0; height: 0; }滚动文字推荐实现方式：避免依赖原生滚动条
用 CSS 动画 + transform 做纯视觉滚动，完全绕过滚动条问题，兼容性更好、性能更高：
- 把文字内容放在一个宽于容器的
内 - 用
@keyframes控制translateX()从右到左平移 - 关键点：
white-space: nowrap防换行，display: inline-block保证单行布局
简单示意：
.marquee-track { white-space: nowrap; overflow: hidden; } .marquee-text { display: inline-block; animation: scroll-left 20s linear infinite; } @keyframes scroll-left { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }iOS Safari 和移动端特殊处理
即使加了 overflow: auto 和滚动条隐藏，iOS 上仍可能因“弹性滚动”导致文字跳动或动画卡顿：
- 务必加
-webkit-overflow-scrolling: touch（仅旧版 iOS，iOS 15+ 已弃用但部分场景仍需） - 避免在滚动容器上同时设
transform和overflow，容易触发渲染 bug - 如果用 js 控制滚动（如
element.scrollLeft），记得加will-change: scroll-position提升性能
最稳的路径：优先用 CSS 动画方案，其次才是带隐藏滚动条的原生滚动。后者在微信内嵌 webview 或某些 android 定制浏览器里表现极不稳定，容易白屏或文字错位。