垂直Swiper移动端最后一屏上滑无法退出容器展示下方内容求助

当前配置的mousewheelReleaseOnEdges: true仅对PC端鼠标滚轮事件生效，这也是PC端操作可以正常跳出容器的原因。Swiper默认的触摸拦截逻辑存在固定特性：只要手指触摸点落在Swiper容器的DOM范围内，就算已经滑到最后一张slide，原生touchmove事件会被持续拦截，不会将滚动权交还给外层页面，这就是移动端手势无法穿透容器的核心原因。

• 方案一：适配Swiper原生内置触摸释放能力
  如果使用的是Swiper v6及以上版本，原生提供了专门对应触摸场景的边缘释放参数touchReleaseOnEdges，和PC端鼠标滚轮的参数逻辑完全对齐。只需要在原有初始化配置中补充该参数，同时关闭边缘滑动的阻尼阻力，避免滑动卡滞：
  参考配置示例：

new Swiper('.swiper-container', {
  direction: 'vertical',
  // 保留原有配置
  pagination: {
    clickable: true,
  },
  mousewheel: {
    releaseOnEdges: true,
  },
  // 新增移动端触摸边缘释放
  touchReleaseOnEdges: true,
  // 关闭边缘阻尼，提升滑动手感
  resistanceRatio: 0,
})

配置完成后，移动端在最后一张slide继续上滑时，Swiper会自动停止拦截touchmove事件，页面会顺着滑动手势自然滚动到下方contents区块，滑动手感和原生页面滚动完全一致。

• 方案二：低版本Swiper（v5及更早）手动实现穿透逻辑
  如果项目依赖的Swiper版本没有内置touchReleaseOnEdges能力，可以通过状态判断+事件释放的方式手动实现：

1. 监听Swiper的slideChange事件，标记当前是否处于最后一张slide
2. 在最后一张slide的DOM上补充原生touch事件监听，计算手指滑动的垂直位移：当判断滑动方向为向上（即触发页面下滚的手势方向）时，主动移除Swiper当前对touchmove的默认拦截
3. 设置合理的触发阈值（比如滑动位移超过5px），避免刚触摸就触发穿透，干扰slide本身的滑动手感

• 严格保证swiper-container和单个swiper-slide的高度为100vh，不要添加额外的内边距、外边距撑出视口范围，避免触摸区域判断错位导致穿透逻辑失效
• 不要给html、body标签添加全局overflow: hidden，否则即使事件控制权正常移交，页面本身也无法滚动
• 给Swiper容器补充touch-action: pan-y的CSS属性，避免移动端浏览器默认的缩放、回弹行为干扰滑动手感

内容的提问来源于stack exchange，提问作者suesoo