overscroll-behavior-x: contain 必须作用于真实横向滚动的子容器（如 .carousel-track），该容器需满足 overflow-x: auto、width 约束且内容溢出；它不控制 y 轴，纵向跳页需额外设 overscroll-behavior-y: contain；ios 15 及更早需 js 降级，且不可与 touch-action 混用。
overscroll-behavior-x: contain 是解决横向轮播图跳页问题的直接手段，但只对真实可滚动的容器生效——写在 body 或轮播容器外壳上基本无效。
必须作用于实际横向滚动的子容器
轮播图能横向滚动，靠的是内部一个设置了 overflow-x: auto（或 scroll）且内容宽度超出容器的子元素，比如 .carousel-track 或 .gallery-scroller。这个元素才是真正的滚动上下文。
-
overscroll-behavior-x: contain必须加在这个子容器上，不是加在.carousel外壳（通常只是position: relative包裹层） - 该子容器需有明确宽度约束（如
width: 100%）和横向滚动能力（overflow-x: auto），否则浏览器不认为它可滚动，属性被静默忽略 - 若用
transform: translateX()+ JS 模拟滚动，overscroll-behavior完全不适用——它只干预原生滚动行为
为什么设了 contain 还是会纵向跳页？
常见现象是：手指横向滑动时稍带一点 Y 轴偏移，页面就突然纵向滚动甚至触发下拉刷新。这不是 overscroll-behavior-x 失效，而是它根本不控制 Y 轴行为。
-
overscroll-behavior-x: contain只拦截 X 轴方向的过度滚动传播，Y 轴仍为默认auto，所以纵向滑动仍会穿透到body - 正确写法应显式声明 Y 轴行为：
overscroll-behavior-y: contain或overscroll-behavior: contain auto（后者等价于x: contain; y: auto） - 若轮播图本身不允许纵向滚动，建议直接用
overscroll-behavior: contain（双轴都设），避免漏掉任意一轴
iOS 15 及更早版本必须 JS 补位
Safari 直到 iOS 16.4 才原生支持 overscroll-behavior，旧版中即使样式完全正确，横向滑动到底后仍可能触发页面跳转或回弹。
- 降级逻辑不能全局拦截
touchmove，否则轮播图内部手势（如缩放、拖拽）会被锁死 - 应只在非轮播可滚动区域拦截：
document.body.addEventListener('touchmove', e => { if (!e.target.closest('.carousel-scroller')) e.preventDefault(); }, { passive: false }) - 必须传
{ passive: false }，否则preventDefault()在 iOS Safari 15+ 会被静默忽略 - 检测支持性优先用
CSS.supports('overscroll-behavior', 'contain')，而非 UA 判断
别和 touch-action 混用
有人试图用 touch-action: pan-x 锁定横向手势，再配 overscroll-behavior-x: contain，结果发现轮播图卡顿或响应迟钝。
-
touch-action: pan-x会禁用所有纵向手势识别（包括 pinch-zoom、长按菜单），且部分安卓 WebView 对它的实现不一致 -
overscroll-behavior和touch-action解决的是不同层级的问题：前者管滚动链传播，后者管手势识别阶段 - 二者混用容易引发冲突，尤其在快速滑动切换图片时，推荐只用
overscroll-behavior配合原生滚动，保持手势自然性
真正难的不是写哪一行 CSS，而是确认轮播图里哪个 DOM 节点在真实滚动、它是否满足「有溢出 + 有滚动条 + 有尺寸约束」这三要素——缺一不可，浏览器才把它当滚动上下文来处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
