touch-action: pan-y 是禁用 iOS/Android 浏览器左右滑动导航最直接有效的方式，它允许竖直滚动但禁用 pan-x 和 pinch-zoom；需作用于 html 或 body 才生效，且无法阻止系统级边缘侧滑返回。
touch-action: pan-y 是最直接有效的写法
禁止 iOS/Android 浏览器默认的手势左右滑动（即前进/后退导航），核心不是“阻止滚动”，而是告诉浏览器：“这个区域只允许竖直方向的手势”。touch-action: pan-y 正是为此设计的声明，它允许上下滑动内容，但明确禁用 pan-x（左右平移）和 pinch-zoom（双指缩放）等横向手势。
常见错误是写成 touch-action: none —— 这会一并禁掉所有手势，包括点击、上下滑动、甚至 input 聚焦，实际体验反而更差。
- 必须作用于
<body>或<html>才能覆盖整页手势行为；局部容器加该属性只影响其内部 - 若页面有固定定位的弹层（如 modal），需单独给弹层加
touch-action: manipulation，否则 iOS 可能因事件捕获顺序导致点击失灵 - 不兼容老版本 iOS（
为什么 overflow-x: hidden 不起作用
overflow-x: hidden 只控制元素自身的水平溢出渲染，对浏览器级的手势导航（比如 iOS Safari 的「侧滑返回」）完全无效。这个行为发生在渲染层之上，和 DOM 滚动无关。
你看到页面没出现水平滚动条，不代表左右滑动手势被拦截了——手指一划，页面照样切到上一页或下一页。
立即学习“前端免费学习笔记（深入）”；
- 别在
body上设overflow-x: hidden试图“堵住”左右滑动，它既不阻止手势，还可能干扰内部 flex/grid 布局的自动换行计算 - 如果页面本身存在水平溢出（比如宽表格或未适配的图片），应优先修复内容宽度问题，而非用 overflow 掩盖
- 真要隐藏滚动条，可用
scrollbar-width: none（Firefox）或::-webkit-scrollbar { display: none }（WebKit），但这和手势拦截无关
JS 配合时必须加 { passive: false }
仅靠 CSS 无法 100% 覆盖所有场景（尤其是老 iOS 或某些 WebView）。补刀方案是监听 touchmove 并调用 preventDefault()，但关键点在于：Chrome 和 iOS Safari 默认把 touch 事件监听器标记为 passive: true，此时 preventDefault() 会被静默忽略，并抛出 [Intervention] Unable to preventDefault inside passive event listener 警告。
- 绑定时必须显式传入
{ passive: false }：document.addEventListener('touchmove', e => e.preventDefault(), { passive: false }) - 不要全局绑定到
document或window，否则会干掉所有可滚动区域（比如列表、轮播图）；推荐绑定到document.body，并在需要滚动的子容器上重置：el.style.touchAction = 'pan-y' - 若同时用了
touch-action: pan-y，再加 JS 阻止属于冗余但安全；反之，只靠 JS 不加 CSS，在 iOS 13.4+ 上仍可能触发弹性回弹
iOS 侧滑返回的边界条件容易被忽略
iOS 的「从边缘侧滑返回」手势有严格触发条件：必须从屏幕最左/右边缘（通常约 30px 内）开始，且初始位移角度接近水平（|Δx| / |Δy| > 2）。这意味着：
- 单纯加
touch-action: pan-y对边缘手势无效——它只约束“在元素区域内”的手势，而边缘返回是系统级行为，不受该 CSS 控制 - 真正能禁用边缘返回的，只有
<meta name="viewport" content="... user-scalable=no">（已废弃）或 WebKit 特定 API（如history.scrollRestoration = 'manual'无用），目前无标准纯前端方案 - 所以实际项目中，应接受边缘返回的存在，转而确保页面状态可恢复（比如用
popstate监听 + 缓存 scroll position），而不是强行禁用
