overflow: hidden 会禁用滚动功能，无法实现“隐藏滚动条但保留滚动”；应使用浏览器前缀隐藏滚动条（如::-webkit-scrollbar、scrollbar-width）或采用CSS动画+transform方案。
直接设 overflow: hidden 不能真正“隐藏滚动条同时保留滚动功能”——它会直接禁用滚动，文字停住不动。你要的是“视觉上藏滚动条，但内容仍可滚动”，得用更精细的 CSS 控制。
为什么 overflow: hidden 不行
这个声明会切断所有溢出内容的显示，且彻底禁用用户滚动行为（包括鼠标滚轮、触摸拖拽、键盘方向键）。对滚动文字（比如 <marquee></marquee> 替代方案或 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
示例代码（适用于包裹滚动文字的容器，如 <div class="marquee">）：<pre class='brush:php;toolbar:false;'>.marquee {
overflow: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE10+ */
}
.marquee::-webkit-scrollbar {
width: 0;
height: 0;
}</pre><h3>滚动文字推荐实现方式：避免依赖原生滚动条</h3>
<p>用 CSS 动画 + <code>transform 做纯视觉滚动，完全绕过滚动条问题，兼容性更好、性能更高：
- 把文字内容放在一个宽于容器的
<span></span>内 - 用
@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 定制浏览器里表现极不稳定，容易白屏或文字错位。
