解决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(); } };

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样式和事件处理。 虽然该问题可能在特定版本中得到修复，但了解这些解决方案仍然有助于应对其他类似的触摸事件冲突问题。 重要的是，在解决问题的过程中，要充分考虑用户体验，并进行充分的测试。

以上就是解决Swiper在移动端水平滚动时垂直页面滚动的问题的详细内容，更多请关注php中文网其它相关文章！