React中如何禁用Swiper垂直鼠标滚轮触发幻灯片切换的功能

解决方案 #

核心问题是你当前mousewheel参数传入了布尔值true，使用的默认配置会响应所有方向的鼠标滚轮事件，垂直滚动也会触发轮播切换。你可以直接通过Swiper自带的配置项解决：

• 把mousewheel参数从布尔值改为配置对象，开启forceToAxis属性，该属性会强制Swiper只响应和轮播方向一致的滚动事件：水平方向的轮播仅响应水平滚轮滑动，垂直滚动不会触发轮播切换。
• 移除你style属性里的overflow: "scroll"配置，Swiper内部已经处理了滚动逻辑，额外添加该属性可能会引发滚动冲突。

修改后的代码如下：

<MySwiper 
    slidesPerView={3}
    direction="horizontal"
    freeMode={true}
    style={{ position: "relative" }}
    spaceBetween={100}
    mousewheel={{
      forceToAxis: true,
      releaseOnEdges: true // 可选配置：滚动到Swiper的首/尾slide后，自动释放滚轮事件，允许页面正常垂直滚动
    }}
    className="mySwiper"
  >
    <SwiperSlide>
      <Slime></Slime>
    </SwiperSlide>
 </MySwiper>

如果上述配置没有生效，你也可以通过自定义滚轮事件判断滚动方向来实现：监听Swiper的wheel事件，判断滚轮的deltaY绝对值大于deltaX时，阻止事件冒泡到Swiper内部即可。

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