Windows 触摸屏上 Swiper 轮播滑不动？可能是内部滚动容器抢走了你的手势

一句话结论：当 Swiper 的 slide 内部嵌套了可滚动容器，Windows 触摸屏上的横滑手势会被该容器"抢走"并触发 touchcancel，导致轮播滑不动。给内部容器补一条 touch-action: pan-y 即可解决。

页面里有两个基于同一份 Swiper 7.3.1 的轮播：

更诡异的是，同一台机器上：

Swiper 7.3.1 的触摸支持依赖 CSS touch-action 与浏览器原生手势裁决。关键链路：

Swiper 只在"无触摸设备"上给容器加 swiper-pointer-events 类 ，这个类的作用是声明 touch-action: pan-y，把横向手势明确让给 Swiper。
Windows 触摸屏会被浏览器识别为触摸设备 （support.touch = true），所以 Swiper 不会给容器加这个类，容器上没有任何 touch-action 声明。
如果 slide 内部还嵌套了一个可滚动容器 （本例是 overflow-y: auto 的卡片网格），横滑手势的起点落在这个容器上时，浏览器原生滚动会把手势判给内部容器。
内部容器只会纵向滚动、不能横向滚动，浏览器判定"手势归属冲突"后触发 touchcancel，Swiper 收不到后续的 move 事件，滑动被打断。

为什么鼠标、模拟、平板没事？

所以问题不在 Swiper 本身，而在"slide 内的可滚动容器 "与"触摸设备上缺失 touch-action 声明"的组合。

给 slide 内部的滚动容器补一句 touch-action: pan-y：

css 复制代码

/* slide 内的卡片网格容器 */
.card-grid {
    overflow-y: auto;   /* 纵向可滚动 */
    touch-action: pan-y; /* 横向手势交回 Swiper，纵向保留原生滚动 */
}

pan-y 的语义是"允许纵向平移手势做默认处理，横向手势不做默认处理"------正好契合这个容器只有纵向滚动的特性：

没有副作用：该容器本身没有横向滚动需求，pan-y 不会改变任何鼠标行为，也不影响纵向滚动。

如果 slide 内部没有可滚动容器（如纯图片轮播），则不会触发这个问题，无需处理。

这个问题的解法不依赖任何 Swiper 的 JS 配置，完全是 CSS 层的事。相关的触摸配置项大多有合理的默认值，一般无需改动：

唯一要留意的：如果轮播需要"手指横滑"，确认没有显式设置 allowTouchMove: false 之类把触摸关掉。其余保持默认即可。

确认是"真触摸"还是"模拟触摸"：先用真实触摸屏验证；DevTools 模拟能滑不代表真机正常。
检查 slide 内部结构 ：是否有 overflow-y: auto / scroll 的可滚动容器嵌套。
检查触摸设备上的 touch-action ：在设备上打开 DevTools，选中 swiper 容器，看计算样式里有没有 touch-action------触摸设备上 Swiper 默认不会帮你声明。
对症下药 ：给内部滚动容器补 touch-action: pan-y，让横向手势明确归属 Swiper。

Swiper 在触摸设备上不会自动声明 touch-action，这一"留白"在 slide 内嵌滚动容器时会引发手势争抢。理解浏览器原生手势裁决的机制，比在 JS 里加一堆事件监听更治本------一条 CSS 就够。