SwiperJS 10.2.0：如何禁用垂直滚动切换，仅允许水平滚动切换

针对你在Swiper 10.2.0核心版遇到的垂直滚动误触切换幻灯片的问题，Swiper有内置配置可以实现需求，无需自定义开发，调整以下配置即可：

核心配置方案 #

直接在Swiper初始化时，对mousewheel和touchAction进行精细化配置：

const swiper = new Swiper('.swiper', {
  // 其他基础配置（如slidesPerView等）
  mousewheel: {
    forceToAxis: true,
    threshold: 10, // 设置滚动方向阈值，仅当滚动角度接近水平时触发切换
  },
  touchAction: 'pan-y', // 允许垂直滚动页面，水平交互交给Swiper
});

为什么之前的尝试无效？ #

• 仅设置mousewheel: true时，Swiper会响应所有方向的鼠标滚轮事件，加上forceToAxis后需要配合threshold来区分滚动方向的敏感度，否则仍可能误触发垂直滚动切换。
• 直接写CSS的touch-action: pan-x会被Swiper内部动态生成的touch-action样式覆盖，使用Swiper自身的touchAction配置项才能生效。

额外说明 #

如果是移动端触摸场景，上述touchAction: 'pan-y'已经能确保垂直滑动时滚动页面，水平滑动时切换幻灯片；桌面端鼠标滚轮则由mousewheel的配置控制，两者结合就能实现类似Mac的交互效果。

内容的提问来源于stack exchange，提问作者S. Gski