Splide.js 垂直全屏滑块实现单页滚动的精确控制-js教程-PHP中文网

Splide.js 垂直全屏滑块实现单页滚动的精确控制

心靈之曲

发布： 2025-10-17 11:07:17

原创

446人浏览过

Splide.js 垂直全屏滑块实现单页滚动的精确控制

本文旨在解决使用 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 样式来定义滑块的高度。

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

查看详情

以下是实现这种效果的 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 容器和多个滑块项：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Splide.js 垂直全屏滑块</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css">
    <style>
        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;
        }
    </style>
</head>
<body>

    <div id="fullpage-slider" class="splide">
        <div class="splide__track">
            <ul class="splide__list">
                <li class="splide__slide">Slide 1</li>
                <li class="splide__slide">Slide 2</li>
                <li class="splide__slide">Slide 3</li>
                <li class="splide__slide">Slide 4</li>
                <li class="splide__slide">Slide 5</li>
            </ul>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
    <script>
        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();
        });
    </script>
</body>
</html>

登录后复制

注意事项与优化

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 垂直全屏滑块实现单页滚动的精确控制的详细内容，更多请关注php中文网其它相关文章！