亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
首頁 > web前端 > js教程 > 正文

Splide.js 垂直全屏滑塊實現(xiàn)單頁滾動的精確控制

心靈之曲
發(fā)布: 2025-10-17 11:07:17
原創(chuàng)
432人瀏覽過

Splide.js 垂直全屏滑塊實現(xiàn)單頁滾動的精確控制

本文旨在解決使用 splide.js 實現(xiàn)垂直全屏滑塊時,鼠標(biāo)滾輪交互導(dǎo)致多頁滑動的問題。通過詳細(xì)闡述 `perpage` 和 `permove` 兩個核心配置項的作用,指導(dǎo)開發(fā)者如何精確控制每次滾輪事件只滑動一頁,從而實現(xiàn)流暢、專業(yè)的單頁全屏滾動體驗。

Splide.js 垂直全屏滑塊單頁滾動控制指南

在使用 Splide.js 構(gòu)建垂直全屏滑塊時,開發(fā)者常遇到一個挑戰(zhàn):當(dāng)啟用鼠標(biāo)滾輪導(dǎo)航功能后,滑塊在一次滾輪操作中可能會意外地滑動多頁,而非預(yù)期的單頁滾動。這通常發(fā)生在配置了 direction: 'ttb' (從上到下) 和 wheel: true (啟用滾輪) 等選項之后。為了實現(xiàn)精確的單頁滾動體驗,我們需要深入理解并合理配置 Splide.js 的 perPage 和 perMove 選項。

理解 perPage 與 perMove

Splide.js 提供了豐富的配置選項來精細(xì)控制滑塊的行為,其中 perPage 和 perMove 對于實現(xiàn)單頁滾動至關(guān)重要:

  1. perPage (每頁顯示數(shù)量)

    • 此選項決定了在容器中同時顯示多少個滑塊。
    • 對于“全屏”滑塊,通常意味著一次只顯示一個完整的滑塊內(nèi)容,因此 perPage 常常被設(shè)置為 1。這確保了每個滑塊元素都能占據(jù)整個視口區(qū)域(配合適當(dāng)?shù)?CSS 樣式,如 height: 100vh)。
    • 如果 perPage 設(shè)置為大于 1 的值,則表示在滑塊容器中會同時顯示多個滑塊。
  2. perMove (每次移動數(shù)量)

    • 此選項控制每次滑塊移動操作(無論是通過導(dǎo)航箭頭、分頁器、觸摸滑動還是鼠標(biāo)滾輪)時,實際移動的滑塊數(shù)量。
    • 為了實現(xiàn)“每次滾輪交互只滑動一頁”的效果,perMove 必須設(shè)置為 1。這意味著無論用戶如何操作,滑塊都只會向前或向后移動一個單位的滑塊。

實現(xiàn)單頁滾動的關(guān)鍵配置

要實現(xiàn)一個垂直的全屏滑塊,并且確保每次鼠標(biāo)滾輪操作只滑動一頁,核心在于將 perMove 設(shè)置為 1。同時,為了確保每個滑塊都能呈現(xiàn)為“全屏”效果,我們通常會將 perPage 也設(shè)置為 1,并配合 CSS 樣式來定義滑塊的高度。

來畫數(shù)字人直播
來畫數(shù)字人直播

來畫數(shù)字人自動化直播,無需請真人主播,即可實現(xiàn)24小時直播,無縫銜接各大直播平臺。

來畫數(shù)字人直播0
查看詳情 來畫數(shù)字人直播

以下是實現(xiàn)這種效果的 Splide.js 配置示例:

document.addEventListener('DOMContentLoaded', function () {
  new Splide('#fullpage-slider', {
    direction: 'ttb',       // 設(shè)置滑塊方向為從上到下 (Top to Bottom)
    height: '100vh',        // 設(shè)置滑塊容器高度為視口高度,實現(xiàn)全屏效果
    wheel: true,            // 啟用鼠標(biāo)滾輪導(dǎo)航
    perPage: 1,             // 每頁顯示一個滑塊
    perMove: 1,             // 每次移動一個滑塊
    arrows: false,          // 可選:隱藏導(dǎo)航箭頭
    pagination: false,      // 可選:隱藏分頁器
    speed: 800,             // 可選:設(shè)置滑動速度,單位毫秒
    easing: 'cubic-bezier(0.25, 1, 0.5, 1)', // 可選:設(shè)置緩動函數(shù)
    // 其他可能需要的選項,例如:
    // keyboard: true,       // 啟用鍵盤導(dǎo)航
    // drag: false,          // 禁用拖動滑動,專注于滾輪和鍵盤導(dǎo)航
  }).mount();
});
登錄后復(fù)制

HTML 結(jié)構(gòu)示例

為了配合上述 JavaScript 配置,您的 HTML 結(jié)構(gòu)應(yīng)包含一個 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; /* 防止瀏覽器默認(rèn)滾動條 */
            font-family: sans-serif;
            color: white;
        }
        .splide__track {
            height: 100vh; /* 確保軌道也占據(jù)整個視口高度 */
        }
        .splide__slide {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3em;
            height: 100vh; /* 每個滑塊項占據(jù)整個視口高度 */
        }
        .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>
登錄后復(fù)制

注意事項與優(yōu)化

  • CSS 樣式: 確保 .splide__track 和 .splide__slide 都設(shè)置了 height: 100vh,以保證每個滑塊項能真正占據(jù)整個視口高度。同時,body 上的 overflow: hidden 可以防止瀏覽器自身的滾動條出現(xiàn),確保 Splide 的滾輪控制能完全接管。
  • 平滑度: speed 和 easing 選項可以調(diào)整滑動動畫的速度和緩動效果,從而優(yōu)化用戶體驗。
  • 其他滾輪選項: Splide 還提供了 wheelMinThreshold (滾輪最小閾值) 和 wheelSleep (滾輪休眠時間) 等選項。這些選項主要用于微調(diào)滾輪靈敏度和防止過快連續(xù)觸發(fā),但解決“一次滑動多頁”的核心問題仍是 perMove: 1。在 perMove: 1 生效后,可以根據(jù)需要進(jìn)一步調(diào)整這些選項來優(yōu)化滾輪交互的感受。
  • 可訪問性: 考慮為滑塊添加鍵盤導(dǎo)航 (keyboard: true) 或其他輔助功能,以提升用戶體驗。

總結(jié)

通過正確配置 Splide.js 的 perPage: 1 和 perMove: 1 選項,結(jié)合 direction: 'ttb' 和 height: '100vh',開發(fā)者可以輕松實現(xiàn)一個功能完善、響應(yīng)靈敏且每次鼠標(biāo)滾輪交互只滑動一頁的垂直全屏滑塊。這種精確的控制不僅提升了用戶體驗,也使得基于 Splide.js 的全屏演示或?qū)Ш阶兊酶訉I(yè)和流暢。

以上就是Splide.js 垂直全屏滑塊實現(xiàn)單頁滾動的精確控制的詳細(xì)內(nèi)容,更多請關(guān)注php中文網(wǎng)其它相關(guān)文章!

最佳 Windows 性能的頂級免費優(yōu)化軟件
最佳 Windows 性能的頂級免費優(yōu)化軟件

每個人都需要一臺速度更快、更穩(wěn)定的 PC。隨著時間的推移,垃圾文件、舊注冊表數(shù)據(jù)和不必要的后臺進(jìn)程會占用資源并降低性能。幸運的是,許多工具可以讓 Windows 保持平穩(wěn)運行。

下載
來源:php中文網(wǎng)
本文內(nèi)容由網(wǎng)友自發(fā)貢獻(xiàn),版權(quán)歸原作者所有,本站不承擔(dān)相應(yīng)法律責(zé)任。如您發(fā)現(xiàn)有涉嫌抄襲侵權(quán)的內(nèi)容,請聯(lián)系admin@php.cn
最新問題
開源免費商場系統(tǒng)廣告
熱門教程
更多>
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng):公益在線php培訓(xùn),幫助PHP學(xué)習(xí)者快速成長!
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號