Splide.js 垂直全屏滑块实现：鼠标滚轮单页滑动控制指南

技术教程
2025-10-15 11:10:21

本教程详细介绍了如何使用 splide.js 实现一个垂直方向的全屏滑块，并解决鼠标滚轮滑动时一次性滚动多页的问题。核心解决方案在于合理配置 perpage 和 permove 选项，确保每次滚轮操作只滑动一页，从而提供流畅、精准的用户体验。

Splide.js 垂直全屏滑块基础配置

Splide.js 是一个轻量级、灵活且功能强大的 J*aScript 滑块库。要实现一个垂直方向的全屏滑块，首先需要设置其基本选项。常见的配置包括将滑动方向设置为 ttb（top-to-bottom，从上到下），并指定滑块高度为 100vh（100% 视口高度）以实现全屏效果，同时启用鼠标滚轮导航。

// 初始配置，可能导致多页滑动问题
const splide = new Splide( '#splide', {
    direction   : 'ttb', // 垂直方向
    height      : '100vh', // 全屏高度
    wheel       : true,    // 启用鼠标滚轮
    // ... 其他选项
});
splide.mount();

然而，仅仅启用 wheel: true 选项，用户可能会遇到一个常见问题：当使用鼠标滚轮滚动时，滑块会一次性跳过多个页面，而不是每次只滑动一页。尽管 Splide 提供了 wheelMinThreshold 和 wheelSleep 等选项用于调整滚轮敏感度，但它们并不能直接控制每次滚轮操作滑动的页面数量。

核心解决方案：控制每页显示与每次移动

解决鼠标滚轮一次性滑动多页的关键在于精确控制 Splide 的 perPage 和 perMove 选项。

perPage: 此选项定义了在滑块容器中同时显示的幻灯片数量。对于一个真正的“全屏滑块”，即每次只显示一页内容占据整个视口，perPage 应设置为 1。
perMove: 此选项定义了每次滑动操作（无论是通过箭头、分页器还是鼠标滚轮）移动的幻灯片数量。为了确保每次滚轮操作只滑动一页，perMove 必须设置为 1。

通过将 perPage 和 perMove 都设置为 1，我们可以实现一个垂直方向的全屏滑块，每次鼠标滚轮滚动时，都能平滑地、精准地滑动到下一页或上一页。

完整示例代码

以下是一个实现垂直全屏单页滑动的完整 Splide.js 配置示例。

Content at Scale

SEO长内容自动化创作平台

154 查看详情 Content at Scale

HTML 结构与基础 CSS

首先，在 HTML 中定义 Splide 滑块的结构，并添加必要的 CSS 样式以确保全屏显示和页面区分。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Splide.js 垂直全屏单页滑块</title>
    <!-- 引入 Splide CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css">
    <style>
        /* 重置默认样式，确保全屏 */
        body, html {
            margin: 0;
            padding: 0;
            overflow: hidden; /* 防止页面出现滚动条 */
            height: 100%;
        }
        /* 每个 slide 占据整个视口高度，并居中内容 */
        .splide__slide {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3em;
            color: white;
            text-align: center;
            height: 100vh; /* 确保每个 slide 占据整个视口高度 */
            box-sizing: border-box; /* 边框和内边距包含在高度内 */
        }
        /* 为每个 slide 设置不同的背景颜色以便区分 */
        .splide__slide:nth-child(1) { background-color: #ff5722; }
        .splide__slide:nth-child(2) { background-color: #03a9f4; }
        .splide__slide:nth-child(3) { background-color: #4caf50; }
        .splide__slide:nth-child(4) { background-color: #9c27b0; }
    </style>
</head>
<body>

    <div class="splide" id="vertical-fullpage-slider">
        <div class="splide__track">
            <ul class="splide__list">
                <li class="splide__slide">页面 1</li>
                <li class="splide__slide&quot;>页面 2</li>
                <li class="splide__slide">页面 3</li>
                <li class="splide__slide">页面 4</li>
            </ul>
        </div>
    </div>

    <!-- 引入 Splide JS -->
    <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( '#vertical-fullpage-slider', {
                direction   : 'ttb',      // 垂直方向滑动 (Top-to-Bottom)
                height      : '100vh',    // 滑块高度占满整个视口
                wheel       : true,       // 启用鼠标滚轮导航
                perPage     : 1,          // 每次只显示一个页面
                perMove     : 1,          // 每次滚动只移动一个页面
                pagination  : false,      // 可选：隐藏分页器
                arrows      : false       // 可选：隐藏导航箭头
            }).mount();
        });
    </script>
</body>
</html>

J*aScript 配置详解

在上述 J*aScript 代码中，关键的配置选项如下：

direction: 'ttb'：将滑块设置为垂直方向。
height: '100vh'：确保滑块的高度等于视口高度，实现全屏效果。
wheel: true：激活鼠标滚轮事件，允许用户通过滚轮进行导航。
perPage: 1：确保在任何给定时间，只有一个幻灯片完全显示在视口中。这是实现“全屏”体验的基础。
perMove: 1：这是解决多页滑动问题的核心。它强制 Splide 在每次滚轮事件（或任何其他导航事件）发生时，只向前或向后移动一个幻灯片。
pagination: false 和 arrows: false：这些是可选的配置，用于隐藏默认的分页器和导航箭头，以提供更简洁的全屏沉浸式体验。

注意事项与优化

CSS 样式: 确保 body, html 没有默认的 margin 或 padding，并且 overflow: hidden 可以防止浏览器自身的滚动条干扰。每个 .splide__slide 元素的高度也应设置为 100vh，以确保内容真正占据整个屏幕。box-sizing: border-box 可以帮助在设置内边距或边框时，元素尺寸保持预期。
用户体验: 对于全屏滑块，通常会隐藏默认的导航箭头 (arrows: false) 和分页器 (pagination: false)，以提供更沉浸式的体验。如果需要导航提示，可以考虑自定义指示器或在页面边缘添加自定义导航按钮。
内容加载: 如果每个全屏页面包含大量图片或复杂内容，请考虑懒加载（Lazy Loading）等优化策略，以确保初始加载速度和滑动时的流畅性。
触摸设备: Splide.js 默认支持触摸滑动，因此无需额外配置即可在移动设备上实现类似的效果。

总结

通过精确配置 Splide.js 的 direction、height、wheel、perPage 和 perMove 选项，开发者可以轻松实现一个功能完善的垂直全屏滑块，并确保每次鼠标滚轮操作只滑动一页，从而提供直观且流畅的用户导航体验。perPage: 1 保证了全屏显示，而 perMove: 1 则精确控制了每次滚动的步长，有效解决了鼠标滚轮多页滑动的问题。

以上就是Splide.js 垂直全屏滑块实现：鼠标滚轮单页滑动控制指南的详细内容，更多请关注其它相关文章！