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

<p>本文旨在解决在使用 Swiper 组件在移动端（特别是 iOS）进行横向滑动时，页面出现意外垂直滚动的问题。通过分析问题原因，并结合社区反馈，提供针对 iOS 16.x 及以上版本的解决方案，帮助开发者优化移动端 Swiper 组件的用户体验。</p> 在使用 Swiper 组件构建移动端页面时，一个常见的问题是在横向滑动 Swiper 时，页面可能会意外地发生垂直滚动，尤其是在 iOS 设备上。这会严重影响用户体验，降低页面的流畅性。虽然可以通过一些hack手段暂时解决，但是并不能从根本上解决问题。 **问题根源** 这个问题通常源于移动设备对触摸事件的解析和处理方式。当用户在 Swiper 上进行横向滑动时，如果滑动角度稍微偏离水平方向，设备可能会将部分滑动识别为垂直滚动，从而导致页面出现上下抖动。 **解决方案** 根据社区反馈，这个问题在 iOS 16.x 版本中得到了修复。这意味着，如果你的用户使用的是 iOS 16.x 或更高版本，这个问题应该已经不存在。 参考链接：[https://github.com/nolimits4web/swiper/issues/6900#issuecomment-1662407556](https://github.com/nolimits4web/swiper/issues/6900#issuecomment-1662407556) **针对低版本 iOS 的兼容性处理** 如果需要兼容 iOS 16.x 之前的版本，可以尝试以下方法： 1. **调整 Swiper 的配置：** * `shortSwipes` 和 `longSwipes`：尝试调整这两个参数的值，以改变 Swiper 对滑动距离的敏感度。 * `touchRatio`：调整触摸比例，控制触摸事件对 Swiper 滑动的影响程度。 2. **CSS 样式调整：** * `touch-action: pan-y;`： 将此样式应用于 Swiper 容器，可以强制浏览器只允许垂直方向的触摸滑动。 注意：这可能会影响 Swiper 的横向滑动，需要根据具体情况进行调整。 3. **事件监听与处理：** * 在 `onTouchStart` 事件中阻止默认的垂直滚动行为： ```javascript const handleTouchStart = (event) => { // 检查滑动角度，如果接近水平方向，则阻止垂直滚动 const touch = event.touches[0]; const startX = touch.clientX; const startY = touch.clientY; const handleTouchMove = (event) => { const touch = event.touches[0]; const deltaX = Math.abs(touch.clientX - startX); const deltaY = Math.abs(touch.clientY - startY); // 可以根据实际情况调整角度阈值 if (deltaX > deltaY * 2) { // 横向滑动为主，阻止垂直滚动 event.preventDefault(); } }; const handleTouchEnd = () => { document.removeEventListener('touchmove', handleTouchMove); document.removeEventListener('touchend', handleTouchEnd); }; document.addEventListener('touchmove', handleTouchMove); document.addEventListener('touchend', handleTouchEnd); }; // 将 handleTouchStart 函数绑定到 Swiper 容器的 touchstart 事件上 swiperContainer.addEventListener('touchstart', handleTouchStart);

**注意：** 这种方法需要仔细调整角度阈值，以避免误判，并确保用户仍然可以正常进行垂直滚动。

总结

虽然 iOS 16.x 已经修复了这个问题，但在兼容旧版本 iOS 设备时，仍然需要进行一些额外的处理。通过调整 Swiper 的配置、CSS 样式，或者监听和处理触摸事件，可以有效地解决 Swiper 在移动端横向滚动时页面垂直滚动的问题，从而提升用户体验。在实际开发中，建议优先考虑升级到 iOS 16.x 及以上版本，并结合上述方法进行兼容性处理。