首页 > 网页制作 >Swiper禁用垂直滚动，只允许水平滑动

Swiper禁用垂直滚动，只允许水平滑动

来源：互联网 2026-06-19 08:19:18

配置`mousewheel.forceToAxis:true`并设置CSS属性`touch-action:pan-x`，可限制Swiper仅响应水平滚动切换幻灯片，垂直滚动则穿透至页面，有效避免误触翻页，从而优化横向轮播与纵向滚动的协同体验。

在 Swiper 中，通过配置 mousewheel.forceToAxis: true 配合 touch-action: pan-x CSS 规则，就能精准限制用户只能通过水平滚动切换幻灯片，避免垂直滚动意外触发翻页，整体滚动体验显著提升。

实际开发中，使用 Swiper 实现横向轮播时最令人困扰的场景是什么？当用户试图上下滚动页面，手指刚划过轮播区域，幻灯片便随之跳转——体验瞬间崩塌。Swiper 默认的鼠标滚轮会响应任意方向的滚动事件，垂直滚动经过 Swiper 时也会触发切换，这显然不是期望的行为。

要实现“仅水平滚动切页、垂直滚动穿透给页面”的交互（类似 macOS 顺滑的惯性滚动），需要从 JavaScript 和 CSS 两方面协同配置。

长期稳定更新的攒劲资源： >>>点此立即查看<<<

核心解决思路

关键配置项是 mousewheel.forceToAxis: true——这是 Swiper v10+ 引入的选项。它让 Swiper 仅在检测到明确水平滚动（deltaX 绝对值明显大于 deltaY）时才触发翻页，垂直滚动直接忽略，交给父容器或页面处理。

const swiper = new Swiper('.my-swiper', {  direction: 'horizontal',  slidesPerView: 'auto',  spaceBetween: 16,  mousewheel: {    forceToAxis: true, //  关键：仅响应水平滚动轴    invert: false,      // 可选：是否反转滚动方向    releaseOnEdges: false // 可选：到达边界时是否释放滚动给页面  },  // 其他配置...});

仅靠 JS 配置还不够，移动端触摸滚动同样会干扰。需要在 CSS 中为 Swiper 容器显式声明 touch-action: pan-x，告知浏览器“此区域只允许水平拖拽，垂直方向不响应”：

.my-swiper {  touch-action: pan-x; /* 允许水平拖拽，禁用垂直拖拽 */}/* 可选：增强兼容性，防止子元素干扰 */.my-swiper .swiper-wrapper,.my-swiper .swiper-slide {  touch-action: pan-x;}

注意事项与最佳实践

forceToAxis: true 完全依赖 Swiper 内部对 deltaX / deltaY 的阈值判断，无需额外编写计算逻辑；
若希望滚动到首尾幻灯片时将垂直滚动“释放”给页面，可启用 mousewheel.releaseOnEdges: true；
注意不要同时设置 mousewheel: true（对象简写）和 mousewheel: { forceToAxis: true }，后者会覆盖前者；
在 SSR 或动态初始化场景下，务必等待 DOM 就绪后再创建 Swiper 实例，并验证 swiper.params.mousewheel.forceToAxis === true；
测试必须覆盖桌面（鼠标滚轮）、平板（触控拖拽）和手机（手指滑动）三种场景，缺一不可。