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

<p>本文针对移动端（尤其是iOS）上使用Swiper组件时，水平滑动可能触发垂直页面滚动的问题，提供了一种解决方案。通过分析问题原因，并结合Swiper的配置和事件处理，最终确认该问题在iOS 16.x版本中已得到修复。同时，也为遇到类似问题的开发者提供排查思路和潜在的解决方向。</p>
在使用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`，因为它会阻止元素的默认行为，可能会影响其他功能的正常使用。

4. 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;

注意事项

• 设备和浏览器兼容性： 不同的设备和浏览器对触摸事件的处理方式可能不同。因此，需要进行充分的测试，以确保解决方案在各种环境下都能正常工作。
• 用户体验： 在阻止默认滚动行为时，需要注意用户体验。避免过度阻止滚动，以免影响用户的正常操作。

总结

解决Swiper在移动端水平滚动时垂直页面滚动的问题，需要综合考虑Swiper的配置、CSS样式和事件处理。 虽然该问题可能在特定版本中得到修复，但了解这些解决方案仍然有助于应对其他类似的触摸事件冲突问题。 重要的是，在解决问题的过程中，要充分考虑用户体验，并进行充分的测试。