本文旨在解決使用 splide.js 實現(xiàn)垂直全屏滑塊時,鼠標(biāo)滾輪交互導(dǎo)致多頁滑動的問題。通過詳細(xì)闡述 `perpage` 和 `permove` 兩個核心配置項的作用,指導(dǎo)開發(fā)者如何精確控制每次滾輪事件只滑動一頁,從而實現(xiàn)流暢、專業(yè)的單頁全屏滾動體驗。
在使用 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 選項。
Splide.js 提供了豐富的配置選項來精細(xì)控制滑塊的行為,其中 perPage 和 perMove 對于實現(xiàn)單頁滾動至關(guān)重要:
perPage (每頁顯示數(shù)量)
perMove (每次移動數(shù)量)
要實現(xiàn)一個垂直的全屏滑塊,并且確保每次鼠標(biāo)滾輪操作只滑動一頁,核心在于將 perMove 設(shè)置為 1。同時,為了確保每個滑塊都能呈現(xiàn)為“全屏”效果,我們通常會將 perPage 也設(shè)置為 1,并配合 CSS 樣式來定義滑塊的高度。
以下是實現(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(); });
為了配合上述 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>
通過正確配置 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)文章!
每個人都需要一臺速度更快、更穩(wěn)定的 PC。隨著時間的推移,垃圾文件、舊注冊表數(shù)據(jù)和不必要的后臺進(jìn)程會占用資源并降低性能。幸運的是,許多工具可以讓 Windows 保持平穩(wěn)運行。
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號