React中Swiper组件阻止移动端触摸滑动页面滚动的问题求助

各位大佬好，我最近在项目里做了3个Swiper组件，其他两个都正常，唯独这一个在移动端触摸滑动的时候，没法滚动整个页面，只能被Swiper的事件拦截。先给大家看看这个Swiper的配置代码：

<Swiper
  allowTouchMove={false}
  effect={'fade'}
  direction={'vertical'}
  slidesPerView={1}
  loop={false}
  pagination={{
    clickable: true,
    el: '.swiper-pagination',
  }}
  autoplay={{
    delay: 5000,
    disableOnInteraction: false,
  }}
  modules={[EffectFade, Navigation, Pagination, Autoplay]}
  style={{
    width: '100%',
    height: `${
      isSmallScreen
        ? '350px'
        : isSmallScreenStyle
        ? '290px'
        : isSmallScreenStyleTwo
        ? '550px'
        : '700px'
    }`,
    marginTop: '20px',
    display: 'flex',
    flexDirection: 'row-reverse',
    position: 'relative',
  }}>
  {/* Slide内容区域 */}
</Swiper>

我已经尝试了几种方法，但都没解决问题：

• 设置touchMoveStopPropagation={true}
• 设置touchStartPreventDefault={false}
• 设置simulateTouch={false}
• 给Swiper添加className="swiper-no-swiping"，并配合CSS：

  .swiper-no-swiping {
    pointer-events: auto !important;
  }
  

我现在的核心需求是：触摸这个Swiper区域的时候，能够正常滑动整个页面，而不是被这个Swiper拦截触摸事件导致页面没法滚动。麻烦各位大佬帮忙看看哪里出问题了，多谢！

备注：内容来源于stack exchange，提问作者genjutsu