如何用Splide.js实现垂直全屏滑块，滚轮每次仅切换一页？

你遇到的滚轮触发多页切换问题，核心是需要严格限制滚轮事件的触发条件，同时避免动画期间重复响应。以下是经过验证的配置，能实现每次滚轮交互仅切换一页：

new Splide( '.splide', {
  direction   : 'ttb',
  height      : '100vh',
  wheel       : true,
  perPage     : 1,
  wheelMinThreshold: 80, // 过滤小幅度滚动，仅当滚动距离超过这个值才触发切换
  wheelSleep: 1200, // 设置两次滚轮触发的间隔，防止连续滚动快速跳页
  waitForTransition: true, // 等待当前切换动画完成后，再响应下一次滚轮事件
} ).mount();

参数说明： #

• wheelMinThreshold: 调整这个值可以过滤掉无意的小幅度滚动，只有当滚轮滚动距离超过设定值时才会触发滑块切换，避免误触。
• wheelSleep: 设定两次滚轮触发的最小间隔时间，防止用户快速滚动时连续触发多次切换。
• waitForTransition: 强制滑块等待当前切换动画完成后，再处理下一次滚轮事件，彻底避免动画未完成时的连续跳页。

如果调整参数后仍有问题，建议检查：

• 是否有其他监听滚轮事件的脚本与Splide冲突
• 确保使用的是Splide.js的最新稳定版本，旧版本可能存在滚轮交互的bug

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