overflow-x: hidden 为什么不能直接让幻灯片全屏滚动
因为 overflow-x: hidden 只是「藏起来」，不解决布局撑开、滚动行为被触发、视口尺寸错位这些根本问题。常见现象是：加了之后幻灯片依然横向滚动、左右留白、或在移动端触发双指缩放失效。
- 它只作用于当前元素，如果父容器没设
width: 100vw或height: 100vh，子项照样能撑破边界 - Flex/Grid 容器里子项默认不收缩，
overflow-x: hidden对内部弹性行为无效 - 移动端 Safari 对
overflow-x: hidden在body或html上的支持不稳定，容易被忽略
全屏幻灯片必须锁定 viewport 和容器尺寸
响应式全屏幻灯片的起点不是隐藏溢出，而是确保每一层都“严丝合缝”地贴合视口。漏掉任意一层，overflow-x: hidden 就变成补丁而非解决方案。
-
和必须清除默认 margin/padding，并设height: 100%，否则100vh计算失准 - 幻灯片容器（如
.slider）需同时声明：width: 100vw、height: 100vh、overflow-x: hidden、scroll-behavior: smooth（如用原生滚动） - 若用 CSS Scroll Snap，必须给容器加
scroll-snap-type: x mandatory，且每个子项加scroll-snap-align: start
移动端 Safari 的 overflow-x: hidden 失效场景
这不是 bug，是 Safari 对「可滚动区域」的严格判定逻辑：当内容高度未超容器、但存在横向伸展可能（比如 inline-block 子项、未设 white-space: nowrap 的文本），它会悄悄启用横向滚动能力，无视 overflow-x: hidden。
- 在幻灯片子项上强制加
flex-shrink: 0或flex: 0 0 100vw，防止 Flex 布局压缩/拉伸导致宽度浮动 - 避免用
display: inline-block布局幻灯片项，它会产生不可见空格，让总宽度 > 100vw - 对图片等替换元素，统一加
max-width: 100%; height: auto;，否则原始尺寸可能撑破容器
用 transform + transition 实现更可控的切换（替代 overflow 滚动）
当需要精确控制每页停留、禁止惯性滑动、或兼容老版 iOS 时，放弃原生滚动，改用 transform: translateX() 是更稳的选择 —— 此时 overflow-x: hidden 才真正起作用，且只用于裁剪过渡帧。
立即学习“前端免费学习笔记（深入）”；
- 容器设
overflow: hidden（不用-x后缀，更稳妥），子项用display: flex横向排列 - 每页宽度固定为
100vw，通过 JS 或 CSS 自定义属性更新transform: translateX(-${currentIndex * 100}vw) - 务必加
will-change: transform提升合成层，避免低端安卓机卡顿 - 别忘了用
touch-action: pan-y禁用横向手势，否则手指滑动仍可能触发页面滚动
事情说清了就结束。真正卡住人的，往往不是 overflow-x: hidden 写没写，而是它前面那三层尺寸声明有没有漏掉、Safari 的 scroll snap 触发条件有没有满足、或者 transform 动画里忘了关 pointer-events 导致点击穿透。
