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
示例代码（适用于包裹滚动文字的容器，如 用 CSS 动画 + 简单示意： 即使加了 最稳的路径：优先用 CSS 动画方案，其次才是带隐藏滚动条的原生滚动。后者在微信内嵌 WebView 或某些 Android 定制浏览器里表现极不稳定，容易白屏或文字错位。.marquee {
overflow: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE10+ */
}
.marquee::-webkit-scrollbar {
width: 0;
height: 0;
}滚动文字推荐实现方式：避免依赖原生滚动条
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，容易触发渲染 bugelement.scrollLeft），记得加 will-change: scroll-position 提升性能
