overflow-x: auto 无反应的根本原因是内容未真正溢出，即子元素总宽未超过容器 clientWidth；常见静默失效包括子项被 width: 100% 压缩、父容器缺失 white-space: nowrap 或 flex-wrap: nowrap、表格未包裹 div 且未设 display: block。
overflow-x: auto 为什么没反应
不是代码写错了，而是内容根本没溢出——横向滚动的前提是子元素总宽度 > 容器 clientWidth。常见静默失效场景有三个：
• 子元素用了 width: 100% 或 max-width: 100%，被强行压缩到容器宽度内
• 父容器没设 white-space: nowrap（用 inline-block 时）或 flex-wrap: nowrap（用 flex 时），导致子项换行堆叠
• 表格直接加 overflow-x: auto 无效，必须套一层 <div> 并让 <table> 变成 display: block
Flex 布局横向滚动的最小可靠配置
别拼凑零散样式，用这套组合能避开 90% 的兼容问题：
• 容器： display: flex + overflow-x: auto + scroll-behavior: smooth
• 子项： flex: 0 0 auto（禁缩放、禁拉伸）+ 显式 width 或 min-width
• 额外加固（尤其移动端）：-webkit-overflow-scrolling: touch
注意：不用 white-space: nowrap，flex 本身就不换行；但若子项含长文本，仍需在子项上加 min-width: 0 防溢出破坏布局
按钮控制 scrollBy() 但点击没动画
根本原因是没开平滑滚动开关：
• 必须在滚动容器上声明 scroll-behavior: smooth，否则 scrollBy({ left: 100, behavior: 'smooth' }) 退化为瞬移
• 别写 el.scrollLeft += 100：iOS Safari 下易卡顿，且无法响应 scroll-behavior
• 滚动目标是“一屏”？直接用 el.scrollBy({ left: el.clientWidth, behavior: 'smooth' })，比硬算像素靠谱得多
• 按钮绑了 onclick 却拿不到元素？检查是否 DOM 尚未加载完成，改用 document.addEventListener('DOMContentLoaded', ...)
移动端拖拽和按钮共存时手指点不动
这不是 JS 逻辑问题，是浏览器对 touch 行为的默认拦截策略：
• 给按钮加 touch-action: manipulation，告诉浏览器“这里只处理点击”
• 给滚动容器加 touch-action: pan-x（不能写 pan-x pinch-zoom，后者会干扰双指缩放）
• 别在滚动容器里监听 touchstart 或空 touchmove handler——哪怕只写 e.preventDefault() 放在异步回调里都会失效
• 如果用了 position: sticky 或 transform 动画同层，iOS 可能渲染卡顿，可临时加 will-change: scroll-position 强制提升
立即学习“前端免费学习笔记（深入）”；
实际项目里最容易被忽略的是：滚动容器的scrollWidth 和 clientWidth 在字体加载、图片懒加载后可能变化，但很多人只在初始化时判断一次“能否滚动”，后续内容动态插入就失准了。真要响应式，得用 ResizeObserver，而不是反复查尺寸。 
