解决Swiper在移动端水平滚动时垂直页面滚动的问题-js教程-PHP中文网

解决Swiper在移动端水平滚动时垂直页面滚动的问题

碧海醫心

发布： 2025-10-12 10:39:26

原创

684人浏览过

解决Swiper在移动端水平滚动时垂直页面滚动的问题

本文针对移动端（尤其是ios）上使用swiper组件时，水平滑动可能触发垂直页面滚动的问题，提供了一种解决方案。通过分析问题原因，并结合swiper的配置和事件处理，最终确认该问题在ios 16.x版本中已得到修复。同时，也为遇到类似问题的开发者提供排查思路和潜在的解决方向。

在使用Swiper组件构建移动端页面时，一个常见的问题是当用户在水平滑动Swiper时，页面可能会出现不期望的垂直滚动。尤其是在iOS设备上，这个问题更为明显。这会严重影响用户体验，使得页面操作不流畅。 **问题分析** 问题的根源在于触摸事件的传播和处理。当用户在Swiper区域进行滑动操作时，浏览器会同时检测水平和垂直方向的滑动。如果滑动角度略微偏离水平方向，或者滑动距离较短，浏览器可能会错误地触发垂直滚动。 **解决方案** 虽然问题的提问者最终发现该问题在iOS 16.x版本中已得到修复，但在之前的版本中，或在其他特定场景下，仍然可能遇到类似问题。以下是一些可以尝试的解决方案： 1. **Swiper配置调整：** * `shortSwipes` 和 `longSwipes`: 尝试调整这两个参数，控制短距离和长距离滑动的灵敏度。虽然提问者已经尝试过，但不同的数值组合可能会产生不同的效果。 * `touchRatio`: 调整触摸比例，控制触摸滑动的距离与Swiper滑动的距离之间的关系。 * `threshold`: 设置触发滑动操作的最小距离。 2. **CSS样式调整：** * `touch-action: pan-y;`: 将此样式应用于Swiper容器，可以明确告诉浏览器，该区域主要处理垂直方向的滑动。 * `overscroll-behavior: contain;`: 阻止滚动链，防止滚动溢出到父元素。 3. **事件监听和处理：** * **`onTouchStart` 事件：** 在`onTouchStart`事件中，可以记录触摸开始时的坐标，然后在`onTouchMove`事件中计算滑动方向。如果滑动方向偏向垂直方向，则阻止默认的滚动行为。 ```javascript let startY; const handleTouchStart = (event) => { startY = event.touches[0].clientY; }; const handleTouchMove = (event) => { const currentY = event.touches[0].clientY; const deltaY = Math.abs(currentY - startY); const deltaX = Math.abs(event.touches[0].clientX - event.touches[0].clientX); //假设有clientX //如果垂直方向滑动明显大于水平方向，则阻止默认滚动 if (deltaY > deltaX && deltaY > 10) { // 10 是一个阈值，可以根据实际情况调整 event.preventDefault(); } };

*   **`preventDefault` 的使用：**  需要谨慎使用`preventDefault`，因为它会阻止元素的默认行为，可能会影响其他功能的正常使用。

登录后复制

Swiper事件结合状态控制：

提问者使用onBeforeTransitionStart和onTransitionEnd结合mobileScrollLock状态来尝试锁定滚动，这是一个很好的思路。可以进一步优化，例如：

在滑动开始时，记录当前的滚动位置。
在滑动过程中，阻止垂直滚动。
在滑动结束后，恢复到之前的滚动位置。

import { useState, useRef } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';

function MySwiper() {
  const [isSwiping, setIsSwiping] = useState(false);
  const scrollPosition = useRef(0);

  const handleTouchStart = () => {
    scrollPosition.current = window.pageYOffset;
    setIsSwiping(true);
  };

  const handleTouchMove = (e) => {
    if (isSwiping) {
      e.preventDefault(); // 阻止默认滚动
      window.scrollTo(0, scrollPosition.current); // 保持滚动位置
    }
  };

  const handleTouchEnd = () => {
    setIsSwiping(false);
  };

  return (
    <div
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
    >
      <Swiper /* Swiper配置 */ >
        {/* Swiper slides */}
      </Swiper>
    </div>
  );
}

export default MySwiper;

登录后复制

注意事项