如何使用鼠标滚轮控件(Swiper.js)处理嵌套滚动容器

我有一个使用Swiper.js作为主要布局的网站。每一节都是幻灯片。其中一些幻灯片需要是可滚动的。我为它们中的每一个创建了嵌套的滑动器实例,并启用了 cssmode 和 freemode 根据开发商的建议。

当然,鼠标滚轮控制一次只适用于一个滑动器,所以我需要在滚动嵌套滑动器时禁用主滑动器的鼠标滚轮控制,并在完成后再次启用。

我通过使用的事件侦听器实现了这一点 slideChangeTransitionEnd 在主滑动器上,当可滚动幻灯片处于活动状态时禁用鼠标滚轮。当到达嵌套滑动器的顶部或底部时 toEdge 事件触发并再次启用主滑动器。

到目前为止,我现在唯一的问题是,当你将主滑动器滚动到嵌套滑动器时,你不再向下滚动,而是再次向上滚动 到Edge 事件不会触发,用户需要向下滚动一点才能再次向上滚动。

我在这里复制了我的问题: Demo

有时嵌套的滑动器有点过冲,这使得再现问题变得不可能。要复制:

• 打开演示
• 单击分页中的第二张幻灯片(右侧)
• 尝试再次向上滚动(不可能)
• 向下滚动一点
• 再次向上滚动,事件启动,滚动主滑动器再次工作

我还尝试在到达嵌套滑块时手动设置一点位置,这样 到Edge 事件每次都会触发,但这会导致布局发生变化。

我已经解决这个问题至少一周了,很高兴能找到解决方案。