本文旨在解决使用 splide.js 实现垂直全屏滑块时，鼠标滚轮交互导致多页滑动的问题。通过详细阐述 `perpage` 和 `permove` 两个核心配置项的作用，指导开发者如何精确控制每次滚轮事件只滑动一页，从而实现流畅、专业的单页全屏滚动体验。
Splide.js 垂直全屏滑块单页滚动控制指南
在使用 Splide.js 构建垂直全屏滑块时，开发者常遇到一个挑战：当启用鼠标滚轮导航功能后，滑块在一次滚轮操作中可能会意外地滑动多页，而非预期的单页滚动。这通常发生在配置了 direction: ‘ttb’ (从上到下) 和 wheel: true (启用滚轮) 等选项之后。为了实现精确的单页滚动体验，我们需要深入理解并合理配置 Splide.js 的 perPage 和 perMove 选项。
理解 perPage 与 perMove
Splide.js 提供了丰富的配置选项来精细控制滑块的行为，其中 perPage 和 perMove 对于实现单页滚动至关重要：
perPage (每页显示数量)
此选项决定了在容器中同时显示多少个滑块。对于“全屏”滑块，通常意味着一次只显示一个完整的滑块内容，因此 perPage 常常被设置为 1。这确保了每个滑块元素都能占据整个视口区域（配合适当的 CSS 样式，如 height: 100vh）。如果 perPage 设置为大于 1 的值，则表示在滑块容器中会同时显示多个滑块。
perMove (每次移动数量)
此选项控制每次滑块移动操作（无论是通过导航箭头、分页器、触摸滑动还是鼠标滚轮）时，实际移动的滑块数量。为了实现“每次滚轮交互只滑动一页”的效果，perMove 必须设置为 1。这意味着无论用户如何操作，滑块都只会向前或向后移动一个单位的滑块。
实现单页滚动的关键配置
要实现一个垂直的全屏滑块，并且确保每次鼠标滚轮操作只滑动一页，核心在于将 perMove 设置为 1。同时，为了确保每个滑块都能呈现为“全屏”效果，我们通常会将 perPage 也设置为 1，并配合 CSS 样式来定义滑块的高度。
以下是实现这种效果的 Splide.js 配置示例：
document.addEventListener('DOMContentLoaded', function () { new Splide('#fullpage-slider', { direction: 'ttb', // 设置滑块方向为从上到下 (Top to Bottom) height: '100vh', // 设置滑块容器高度为视口高度，实现全屏效果 wheel: true, // 启用鼠标滚轮导航 perPage: 1, // 每页显示一个滑块 perMove: 1, // 每次移动一个滑块 arrows: false, // 可选：隐藏导航箭头 pagination: false, // 可选：隐藏分页器 speed: 800, // 可选：设置滑动速度，单位毫秒 easing: 'cubic-bezier(0.25, 1, 0.5, 1)', // 可选：设置缓动函数 // 其他可能需要的选项，例如： // keyboard: true, // 启用键盘导航 // drag: false, // 禁用拖动滑动，专注于滚轮和键盘导航 }).mount();});
HTML 结构示例
为了配合上述 JavaScript 配置，您的 HTML 结构应包含一个 Splide 容器和多个滑块项：
Splide.js 垂直全屏滑块 body { margin: 0; overflow: hidden; /* 防止浏览器默认滚动条 */ font-family: sans-serif; color: white; } .splide__track { height: 100vh; /* 确保轨道也占据整个视口高度 */ } .splide__slide { display: flex; align-items: center; justify-content: center; font-size: 3em; height: 100vh; /* 每个滑块项占据整个视口高度 */ } .splide__slide:nth-child(odd) { background-color: #3498db; } .splide__slide:nth-child(even) { background-color: #2ecc71; }document.addEventListener('DOMContentLoaded', function () { new Splide('#fullpage-slider', { direction: 'ttb', height: '100vh', wheel: true, perPage: 1, perMove: 1, arrows: false, pagination: false, speed: 800, easing: 'cubic-bezier(0.25, 1, 0.5, 1)', }).mount(); });
注意事项与优化
CSS 样式： 确保 .splide__track 和 .splide__slide 都设置了 height: 100vh，以保证每个滑块项能真正占据整个视口高度。同时，body 上的 overflow: hidden 可以防止浏览器自身的滚动条出现，确保 Splide 的滚轮控制能完全接管。平滑度： speed 和 easing 选项可以调整滑动动画的速度和缓动效果，从而优化用户体验。其他滚轮选项： Splide 还提供了 wheelMinThreshold (滚轮最小阈值) 和 wheelSleep (滚轮休眠时间) 等选项。这些选项主要用于微调滚轮灵敏度和防止过快连续触发，但解决“一次滑动多页”的核心问题仍是 perMove: 1。在 perMove: 1 生效后，可以根据需要进一步调整这些选项来优化滚轮交互的感受。可访问性： 考虑为滑块添加键盘导航 (keyboard: true) 或其他辅助功能，以提升用户体验。
总结
通过正确配置 Splide.js 的 perPage: 1 和 perMove: 1 选项，结合 direction: ‘ttb’ 和 height: ‘100vh’，开发者可以轻松实现一个功能完善、响应灵敏且每次鼠标滚轮交互只滑动一页的垂直全屏滑块。这种精确的控制不仅提升了用户体验，也使得基于 Splide.js 的全屏演示或导航变得更加专业和流畅。
以上就是Splide.js 垂直全屏滑块实现单页滚动的精确控制的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1530219.html
微信扫一扫 
支付宝扫一扫 
