Splide.js实现垂直全屏滑块：精准控制鼠标滚轮单页滚动-js教程-PHP中文网

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

霞舞

发布： 2025-10-16 13:25:37

原创

688人浏览过

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

本教程详细介绍了如何使用splide.js库构建一个垂直方向的全屏滑块，并精确控制鼠标滚轮的滚动行为，确保每次滚动仅切换一页内容。通过配置direction、height、wheel、perpage和permove等关键选项，开发者可以轻松实现流畅且用户友好的单页滚动体验。

Splide.js是一个轻量级、灵活且功能强大的JavaScript滑块库，广泛应用于网页中的图片轮播、内容切换等场景。其强大的配置选项使得开发者能够根据具体需求定制各种复杂的滑块行为。本文将聚焦于一个常见的需求：如何利用Splide.js创建一个垂直方向的全屏滑块，并确保用户通过鼠标滚轮滚动时，每次只精确地切换一页内容，避免一次性滚动多页的非预期行为。

核心挑战：鼠标滚轮的多页滚动问题

在实现垂直全屏滑块时，开发者通常会配置direction: 'ttb'（top-to-bottom，从上到下）和height: '100vh'（占据视口全高）来达到垂直全屏的效果，并通过wheel: true来启用鼠标滚轮导航。然而，在某些情况下，仅凭这些配置，鼠标滚轮可能会导致一次滚动操作切换多页，而非预期的单页切换。这通常是因为Splide.js的默认行为或未明确指定某些关键参数所致。

解决方案：关键配置项解析

要实现垂直全屏、鼠标滚轮单页滚动的效果，除了基本的垂直和全高设置外，以下两个核心配置项至关重要：perPage和perMove。

direction: 'ttb' 此选项用于指定滑块的滚动方向为垂直。'ttb'代表“top-to-bottom”，即从上到下滚动。
```
direction: 'ttb',
```
登录后复制
height: '100vh' 此选项将滑块的高度设置为视口高度的100%，确保每个滑块都能填满整个屏幕，从而实现“全屏”效果。
```
height: '100vh',
```
登录后复制
wheel: true 此选项启用鼠标滚轮事件来控制滑块的导航。当用户滚动鼠标滚轮时，滑块将根据滚轮方向进行切换。
```
wheel: true,
```
登录后复制
perPage: 1 这是实现“全屏”效果的关键之一。perPage选项定义了在视口中同时可见的滑块数量。将其设置为1，意味着每次只显示一个完整的滑块，与height: '100vh'结合，完美实现了单页全屏展示。
```
perPage: 1,
```
登录后复制
perMove: 1 这是解决鼠标滚轮多页滚动问题的核心。perMove选项定义了每次交互（无论是点击导航箭头、拖动还是鼠标滚轮滚动）移动的滑块数量。将其设置为1，可以确保每次鼠标滚轮滚动操作，无论滚动的幅度如何，都只导致一个滑块的切换，从而实现精准的单页滚动。
```
perMove: 1,
```
登录后复制

示例代码

下面是一个完整的HTML、CSS和JavaScript示例，展示了如何结合上述配置项来实现垂直全屏、鼠标滚轮单页滚动的Splide.js滑块。

小羊标书

一键生成百页标书，让投标更简单高效

查看详情

HTML 结构 (index.html)

<!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.js 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; /* 防止页面滚动条 */
            font-family: Arial, sans-serif;
        }

        /* 自定义样式，确保每个slide内容居中且有背景色 */
        .splide__slide {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3em;
            color: white;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
            /* 每个slide占据全屏高度，由JS配置height: '100vh'控制 */
        }

        /* 不同的背景色以区分页面 */
        .splide__slide:nth-child(1) { background-color: #ff5733; }
        .splide__slide:nth-child(2) { background-color: #33ff57; }
        .splide__slide:nth-child(3) { background-color: #3357ff; }
        .splide__slide:nth-child(4) { background-color: #ff33a1; }
        .splide__slide:nth-child(5) { background-color: #a1ff33; }
    </style>
</head>
<body>
    <div id="vertical-slider" class="splide">
        <div class="splide__track">
            <ul class="splide__list">
                <li class="splide__slide">页面 1</li>
                <li class="splide__slide">页面 2</li>
                <li class="splide__slide">页面 3</li>
                <li class="splide__slide">页面 4</li>
                <li class="splide__slide">页面 5</li>
            </ul>
        </div>
    </div>

    <!-- 引入 Splide.js JavaScript -->
    <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-slider', {
                direction: 'ttb',     // 垂直方向
                height: '100vh',      // 滑块高度为视口高度
                wheel: true,          // 启用鼠标滚轮
                perPage: 1,           // 每次只显示一个滑块
                perMove: 1,           // 每次移动一个滑块
                arrows: true,         // 显示导航箭头
                pagination: true,     // 显示分页指示器
                speed: 800,           // 切换速度
                easing: 'cubic-bezier(0.25, 1, 0.5, 1)', // 缓动函数
            }).mount();
        });
    </script>
</body>
</html>

登录后复制

注意事项与最佳实践

perPage与perMove的协同作用：perPage: 1确保了在任何时候只有一个滑块可见，这对于实现“全屏”体验至关重要。perMove: 1则保证了每次交互（包括鼠标滚轮）只移动一个滑块。这两个参数的正确组合是实现目标效果的关键。如果perPage设置为大于1的值，则屏幕上会同时显示多个滑块，不再是“全屏”概念。
wheelMinThreshold和wheelSleep： Splide.js还提供了wheelMinThreshold和wheelSleep等选项，它们主要用于调整鼠标滚轮的灵敏度和冷却时间。wheelMinThreshold定义了触发滚动的最小滚轮增量，而wheelSleep则设置了两次滚轮事件之间的最小间隔时间，以防止过于频繁的滚动。虽然这些选项可以优化滚轮体验，但它们并不能直接解决一次滚动多页的问题，解决该问题的核心在于perMove: 1。
内容适应性： 当使用height: '100vh'时，请确保每个滑块内部的内容能够良好地适应全屏高度。如果内容过长，可能会出现溢出或需要内部滚动条的情况，这可能与全屏滑块的设计意图相悖。
响应式设计： 对于移动设备，鼠标滚轮并非主要交互方式。Splide.js默认支持触摸滑动，因此在移动端用户仍能获得良好的体验。如果需要针对不同屏幕尺寸调整滑块行为，可以利用Splide.js的响应式选项。

总结

通过本教程，我们详细探讨了如何利用Splide.js构建一个垂直全屏滑块，并解决了鼠标滚轮一次滚动多页的问题。核心在于理解并正确配置direction: 'ttb'、height: '100vh'、wheel: true以及最重要的perPage: 1和perMove: 1。掌握这些配置，开发者可以为用户提供一个流畅、精准且符合预期的垂直全屏单页滚动体验。

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