fullPage.js全屏滾動(dòng)展示完整實(shí)戰(zhàn)教程(2025最新版)
更新時(shí)間：2025年12月19日 10:52:57 作者：Chandler讀書學(xué)習(xí)
fullPage.js是一款知名的JavaScript插件,專為創(chuàng)建全屏滾動(dòng)效果而設(shè)計(jì),這篇文章主要介紹了fullPage.js全屏滾動(dòng)展示的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
fullPage.js 完整實(shí)戰(zhàn)教程（2025 最新版）
邏輯清晰 · 內(nèi)容具體 · 可直接復(fù)制運(yùn)行
一、什么是 fullPage.js？
fullPage.js 是由西班牙開(kāi)發(fā)者 Álvaro Trigo 創(chuàng)建并持續(xù)維護(hù)的超輕量級(jí)全屏滾動(dòng)庫(kù)（當(dāng)前最新版本 4.x），專為打造沉浸式單頁(yè)網(wǎng)站而生。
- 文件大?。簝H ~15KB（gzip 后 < 8KB）
- 無(wú) jQuery 依賴（純?cè)?JS）
- 支持垂直全屏滾動(dòng) + 水平 Slide 滑動(dòng)
- 完美支持移動(dòng)端觸摸、鍵盤、鼠標(biāo)滾輪
- 內(nèi)置錨點(diǎn)鏈接、懶加載、響應(yīng)式降級(jí)
- 開(kāi)源 GPLv3 許可，商業(yè)項(xiàng)目可購(gòu)買授權(quán)
官網(wǎng)：https://alvarotrigo.com/fullPage/
GitHub：https://github.com/alvarotrigo/fullPage.js
二、核心理念與工作原理
| 理念 | 說(shuō)明 |
|---|---|
| 快照式滾動(dòng)（Snap Scrolling） | 滾動(dòng)時(shí)不連續(xù)滑動(dòng) → 吸附到下一個(gè)全屏 section，像 PPT 翻頁(yè) |
| 滾動(dòng)劫持 | 攔截原生滾動(dòng)事件，用 CSS3 transform 或 JavaScript 控制位置 |
| Section + Slide 結(jié)構(gòu) | 垂直方向用 .section，水平方向用 .slide，層次清晰 |
| 狀態(tài)驅(qū)動(dòng) + 事件回調(diào) | 所有交互通過(guò) onLeave、afterLoad、afterSlideLoad 等回調(diào)控制 |
| 漸進(jìn)增強(qiáng) | JS 失效時(shí)自動(dòng)降級(jí)為普通長(zhǎng)頁(yè)面，SEO 友好 |
三、適用場(chǎng)景與不適用場(chǎng)景
| 強(qiáng)烈推薦場(chǎng)景 | 謹(jǐn)慎使用 / 不推薦場(chǎng)景 |
|---|---|
| 品牌官網(wǎng)、產(chǎn)品發(fā)布頁(yè) | 內(nèi)容密集型博客、新聞?wù)?/td> |
| 創(chuàng)意作品集、設(shè)計(jì)師/攝影師個(gè)人站 | 需要精確像素級(jí)滾動(dòng)定位的儀表盤 |
| H5 營(yíng)銷活動(dòng)頁(yè)、年會(huì)邀請(qǐng)函 | 超長(zhǎng)表單頁(yè)面 |
| 移動(dòng)端引導(dǎo)頁(yè)、App 落地頁(yè) | 傳統(tǒng)多頁(yè)企業(yè)站（除非只有首頁(yè)用全屏） |
| 在線簡(jiǎn)歷、交互式故事網(wǎng)站 | 管理后臺(tái)、復(fù)雜數(shù)據(jù)表格頁(yè)面 |
四、快速上手：完整可運(yùn)行 Demo
基礎(chǔ)垂直全屏滾動(dòng)（最常用）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fullPage.js 基礎(chǔ)示例</title>
<!-- 1. 引入 CSS -->
<link rel="stylesheet" rel="external nofollow" rel="external nofollow" >
<style>
.section { text-align: center; color: #fff; font-family: "Microsoft YaHei"; }
.section1 { background: #ff5f57; }
.section2 { background: #2ecc71; }
.section3 { background: #3498db; }
.section4 { background: #9b59b6; }
h1 { padding-top: 45vh; font-size: 4rem; }
</style>
</head>
<body>
<div id="fullpage">
<div class="section section1">
<h1>第一屏 - 首頁(yè)</h1>
</div>
<div class="section section2">
<h1>第二屏 - 關(guān)于</h1>
</div>
<div class="section section3">
<div class="slide"><h1>產(chǎn)品 A</h1></div>
<div class="slide"><h1>產(chǎn)品 B</h1></div>
<div class="slide"><h1>產(chǎn)品 C</h1></div>
</div>
<div class="section section4">
<h1>第四屏 - 聯(lián)系我們</h1>
</div>
</div>
<!-- 2. 引入 JS -->
<script src="https://cdn.jsdelivr.net/npm/fullpage.js@4/dist/fullpage.min.js"></script>
<script>
new fullpage('#fullpage', {
// 常用配置項(xiàng)
autoScrolling: true, // 啟用全屏滾動(dòng)（默認(rèn) true）
scrollHorizontally: true, // 水平 slide 可用鍵盤左右方向鍵
navigation: true, // 右側(cè)小圓點(diǎn)導(dǎo)航
navigationPosition: 'right',
anchors: ['home', 'about', 'products', 'contact'], // 錨點(diǎn)，URL 可直接 #about
lazyLoading: true, // 懶加載圖片/video
scrollingSpeed: 800, // 滾動(dòng)動(dòng)畫時(shí)長(zhǎng) ms
easing: 'easeInOutCubic', // 緩動(dòng)函數(shù)
// 常用回調(diào)
afterLoad: function(origin, destination, direction) {
console.log('已到達(dá)：', destination.anchor);
},
onLeave: function(origin, destination, direction) {
console.log('離開(kāi)', origin.anchor, '→ 前往', destination.anchor);
}
});
</script>
</body>
</html>
進(jìn)階：帶水平 Slide + 響應(yīng)式降級(jí) + 視頻自動(dòng)播放
new fullpage('#fullpage', {
licenseKey: 'YOUR_LICENSE_KEY', // 商業(yè)項(xiàng)目需填寫
anchors: ['page1', 'page2', 'gallery', 'contact'],
menu: '#menu', // 與頂部導(dǎo)航聯(lián)動(dòng)
navigation: true,
slidesNavigation: true, // 水平 slide 底部小點(diǎn)
responsiveWidth: 1024, // 寬度 < 1024px 時(shí)關(guān)閉全屏滾動(dòng)，恢復(fù)普通滾動(dòng)
parallax: true, // 需要購(gòu)買 parallax 擴(kuò)展
fadingEffect: true, // 需要購(gòu)買 fadingEffect 擴(kuò)展
// 視頻/音頻自動(dòng)播放控制
onLeave: function(origin, destination, direction) {
const videos = document.querySelectorAll('video');
videos.forEach(v => v.pause());
},
afterLoad: function(origin, destination) {
const activeVideo = destination.item.querySelector('video[data-autoplay]');
if (activeVideo) activeVideo.play();
}
});
五、核心 API 速查表（最常用）
| 方法 | 說(shuō)明 |
|---|---|
fullpage_api.moveSectionDown() | 向下滾動(dòng)一屏 |
fullpage_api.moveSectionUp() | 向上滾動(dòng)一屏 |
fullpage_api.moveTo(section, slide) | 跳轉(zhuǎn)到指定 section（從1開(kāi)始）與 slide |
fullpage_api.silentMoveTo(section, slide) | 無(wú)動(dòng)畫靜默跳轉(zhuǎn) |
fullpage_api.setAllowScrolling(false) | 禁止?jié)L動(dòng)（常用于彈窗時(shí)） |
fullpage_api.setScrollingSpeed(1000) | 修改滾動(dòng)速度 |
fullpage_api.reBuild() | 動(dòng)態(tài)添加/刪除 section 后調(diào)用重建 |
六、最佳實(shí)踐與常見(jiàn)坑
| 場(chǎng)景 | 推薦做法 | 常見(jiàn)錯(cuò)誤 |
|---|---|---|
| 移動(dòng)端體驗(yàn) | 設(shè)置 responsiveWidth: 768 或 responsiveHeight | 完全不做響應(yīng)式導(dǎo)致手機(jī)卡頓 |
| 圖片/視頻性能 | 使用 data-src + lazyLoading: true | 所有媒體直接 src 加載，首屏加載慢 |
| 與其他滾動(dòng)插件沖突 | 關(guān)閉 fullPage 滾動(dòng)：setAllowScrolling(false) | 同時(shí)使用 swiper + fullpage |
| 動(dòng)態(tài)添加 section | 添加完 DOM 后立即調(diào)用 fullpage_api.reBuild() | 忘記 rebuild 導(dǎo)致新 section 無(wú)效 |
| SEO 與分享鏈接 | 必須設(shè)置 anchors 并保留默認(rèn)滾動(dòng)降級(jí) | 只用索引跳轉(zhuǎn)，分享鏈接無(wú)效 |
| 商業(yè)項(xiàng)目去掉底部版權(quán)文字 | 購(gòu)買商業(yè)授權(quán)后填寫 licenseKey | 直接刪 DOM 刪除（會(huì)被檢測(cè)） |
七、推薦配套工具
- 官方 React 包裝：
react-fullpage - 官方 Vue 包裝：
@fullpage/vue-fullpage - 動(dòng)畫增強(qiáng)：GSAP + fullpage 的
afterLoad/onLeave回調(diào) - 無(wú)代碼平臺(tái)：在 Webflow、Framer、Readymag 中直接嵌入自定義代碼即可
八、結(jié)語(yǔ)
fullPage.js 依然是 2025 年打造高端沉浸式單頁(yè)網(wǎng)站的最佳選擇之一。它 API 簡(jiǎn)潔、文檔完善、社區(qū)活躍、更新頻繁。只要用在合適場(chǎng)景，幾乎沒(méi)有競(jìng)品能在同等體積下提供如此絲滑的體驗(yàn)。
立即上手：
官方在線示例合集：https://alvarotrigo.com/fullPage/examples/
CDN 快速引用：
<link rel="stylesheet" rel="external nofollow" rel="external nofollow" > <script src="https://cdn.jsdelivr.net/npm/fullpage.js@4/dist/fullpage.min.js"></script>
祝你做出炫酷的全屏滾動(dòng)網(wǎng)站！
到此這篇關(guān)于fullPage.js全屏滾動(dòng)展示的文章就介紹到這了,更多相關(guān)fullPage.js全屏滾動(dòng)展示內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
ES6 let和const定義變量與常量的應(yīng)用實(shí)例分析
這篇文章主要介紹了ES6 let和const定義變量與常量的應(yīng)用,結(jié)合實(shí)例形式分析了ES6使用let定義變量以及使用const定義常量的相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
JavaScript中常見(jiàn)的獲取當(dāng)前日期方法
在我們開(kāi)發(fā)的許多應(yīng)用程序都會(huì)用到某種日期功能,無(wú)論是內(nèi)容的創(chuàng)建日期還是活動(dòng)的時(shí)間戳等等,這篇文章主要給大家介紹了關(guān)于JavaScript中常見(jiàn)的獲取當(dāng)前日期方法,需要的朋友可以參考下2024-06-06
這篇文章主要為大家詳細(xì)介紹了一些你不知道的JavaScript異步相關(guān)知識(shí)，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)JavaScript有一定幫助，感興趣的可以跟隨小編一起學(xué)習(xí)一下2022-11-11
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)翻書特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
javascript中數(shù)組和字符串的方法對(duì)比
下面小編就為大家?guī)?lái)一篇javascript中數(shù)組和字符串的方法對(duì)比。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
使用echarts實(shí)現(xiàn)3d柱狀圖+折線圖
這篇文章主要為大家詳細(xì)介紹了如何使用echarts實(shí)現(xiàn)3d柱狀圖和折線圖,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以了解一下2024-12-12
JavaScript中in和hasOwnProperty區(qū)別詳解
in操作符只要通過(guò)對(duì)象能訪問(wèn)到屬性就返回true。hasOwnProperty()只在屬性存在于實(shí)例中時(shí)才返回true。下面通過(guò)本文給大家分享JavaScript中in和hasOwnProperty區(qū)別詳解，感興趣的朋友一起看看吧2017-08-08
這篇文章主要為大家詳細(xì)介紹了JS基于VUE組件實(shí)現(xiàn)城市列表效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了JS事件綁定的常用方式,結(jié)合實(shí)例形式總結(jié)分析了javascript三種常見(jiàn)的事件綁定原理與操作技巧,需要的朋友可以參考下2019-03-03
webpack4 升級(jí)遷移的實(shí)現(xiàn)
這篇文章主要介紹了webpack 4 升級(jí)遷移的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09