如何禁用 Swiper 垂直滚动并仅允许水平滑动-js教程-PHP中文网

通过 Swiper v10+ 的 mousewheel.forceToAxis: true 配置，可精准限制滚动轴向，使用户仅能水平滑动切换幻灯片，垂直滚动则透传至页面，解决内容被拦截导致无法上下浏览的问题。

通过 swiper v10+ 的 `mousewheel.forcetoaxis: true` 配置，可精准限制滚动轴向，使用户仅能水平滑动切换幻灯片，垂直滚动则透传至页面，解决内容被拦截导致无法上下浏览的问题。

Swiper 默认启用鼠标滚轮（mousewheel: true）时，会响应任意方向的滚动事件，并触发幻灯片切换，这在嵌入长页面时极易干扰用户正常浏览——例如试图向下滚动页面时，却意外切换了横向轮播图。为实现“仅水平滚动切换、垂直滚动穿透”的 Apple macOS 风格交互体验，关键在于启用 轴向强制模式（forceToAxis）。

该功能需将 mousewheel 设为对象形式，并显式设置 forceToAxis: true：

Swiper水平文字时间轴代码

Swiper水平文字时间轴代码是一款企业发展历程时间轴，带左右箭头的水平时间轴滑动切换效果代码。

下载

const swiper = new Swiper('.my-slider', {
  scrollbar: { el: '.swiper-scrollbar', draggable: true },
  spaceBetween: 20,
  slidesPerView: 'auto',
  mousewheel: {
    forceToAxis: true, // ✅ 核心配置：仅当滚动方向与滑动方向一致时才触发切换
    invert: false,      // 可选：设为 true 可反转滚动方向逻辑
  },
  grabCursor: true,
  // 注意：无需手动设置 touch-action: pan-x — Swiper v10+ 内部已自动处理 CSS 触摸行为
});

⚠️ 注意事项：

forceToAxis: true 仅在 mousewheel 启用且 Swiper 滑动方向为 'horizontal'（默认）时生效；
不要将 mousewheel 简写为 true（如 mousewheel: true），否则 forceToAxis 将被忽略；
若同时使用触摸设备，Swiper v10+ 会自动添加 touch-action: pan-y 到容器，确保垂直滑动不被阻止；手动设置 touch-action: pan-x 反而可能破坏移动端行为，应避免；
如仍存在垂直滚动被拦截问题，请检查父容器是否设置了 overflow: hidden 或 pointer-events: none 等干扰样式。

总结：只需正确配置 mousewheel: { forceToAxis: true }，即可优雅实现「水平切换、垂直透传」的原生级滚动体验，无需自定义事件监听或 CSS 黑科技，符合 Swiper 官方推荐的最佳实践。