fullPage.js 是一个由西班牙开发者 Álvaro Trigo 创建并维护的超轻量级全屏滚动库（当前最新版本为 4.x），专门用于打造极具沉浸感的单页网站。
- 文件大小：仅约 15KB（gzip 压缩后 < 8KB）
- 无依赖：纯原生 JavaScript 实现，无需 jQuery
- 核心功能：支持垂直全屏滚动 + 水平幻灯片切换
- 交互支持：完美兼容移动端触摸、键盘导航和鼠标滚轮
- 内置特性：提供锚点链接、图片懒加载、响应式降级等开箱即用的功能
- 许可：采用 GPLv3 开源协议，商业项目需购买授权。
官网：https://alvarotrigo.com/fullPage/
GitHub：https://github.com/alvarotrigo/fullPage.js
二、工作原理与核心理念
| 理念 |
说明 |
| 快照式滚动（Snap Scrolling） |
滚动时不是连续滑动，而是像翻PPT一样“吸附”到下一个全屏区块。 |
| 滚动控制 |
拦截原生滚动事件，通过 CSS3 transform 或 JavaScript 精确控制页面位置。 |
| 结构清晰 |
垂直方向使用 .section，水平方向使用 .slide，层次分明。 |
| 事件驱动 |
通过丰富的回调函数（如 onLeave、afterLoad）控制所有交互逻辑。 |
| 渐进增强 |
当JavaScript失效时，会自动降级为普通长页面，对SEO友好。 |
三、适用与不适用场景
| 强烈推荐场景 |
谨慎使用或不推荐场景 |
| 品牌官网、产品发布页 |
内容密集的博客、新闻网站 |
| 创意作品集、设计师/摄影师个人站 |
需要像素级精确滚动的数据仪表盘 |
| H5营销活动页、线上邀请函 |
超长表单填写页面 |
| 移动端引导页、App落地页 |
传统的多页面企业站（除非仅首页使用） |
| 在线简历、交互式故事网站 |
管理后台、复杂的数据表格页面 |
四、快速上手：完整可运行示例
基础垂直全屏滚动（最常用模式）
以下是一个包含完整HTML结构的基础示例，复制即可运行。
<!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 基础示例</title>
<!-- 1. 引入 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullpage.js@4/dist/fullpage.min.css">
<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>第一屏 - 首页</h1>
</div>
<div class="section section2">
<h1>第二屏 - 关于我们</h1>
</div>
<div class="section section3">
<div class="slide"><h1>产品 A</h1></div>
<div class="slide"><h1>产品 B</h1></div>
<div class="slide"><h1>产品 C</h1></div>
</div>
<div class="section section4">
<h1>第四屏 - 联系我们</h1>
</div>
</div>
<!-- 2. 引入 JS 文件并初始化 -->
<script src="https://cdn.jsdelivr.net/npm/fullpage.js@4/dist/fullpage.min.js"></script>
<script>
new fullpage('#fullpage', {
// 常用配置项
autoScrolling: true, // 启用全屏滚动
scrollHorizontally: true, // 允许用键盘左右键切换水平幻灯片
navigation: true, // 显示右侧导航点
navigationPosition: 'right',
anchors: ['home', 'about', 'products', 'contact'], // 锚点链接，URL会变为 #about
lazyLoading: true, // 启用图片懒加载
scrollingSpeed: 800, // 滚动动画时长（毫秒）
easing: 'easeInOutCubic', // 缓动函数
// 常用回调函数示例
afterLoad: function(origin, destination, direction) {
console.log('已到达屏幕：', destination.anchor);
},
onLeave: function(origin, destination, direction) {
console.log('离开', origin.anchor, '，前往', destination.anchor);
}
});
</script>
</body>
</html>
运行上述代码，你将看到一个具有四屏垂直滚动，且第三屏内包含水平幻灯片切换的网页效果。
进阶配置：响应式降级与媒体控制
对于更复杂的项目，你可能需要响应式降级和媒体播放控制。
new fullpage('#fullpage', {
licenseKey: 'YOUR_LICENSE_KEY', // 商业项目必须填写
anchors: ['page1', 'page2', 'gallery', 'contact'],
menu: '#menu', // 与页面导航菜单联动
navigation: true,
slidesNavigation: true, // 显示水平幻灯片导航点
responsiveWidth: 1024, // 当窗口宽度小于1024px时，禁用全屏滚动，恢复普通滚动
// parallax: true, // 视差效果（需购买扩展）
// fadingEffect: true, // 淡入淡出效果（需购买扩展）
// 视频自动播放/暂停控制
onLeave: function(origin, destination, direction) {
// 离开当前屏时暂停所有视频
const videos = document.querySelectorAll('video');
videos.forEach(v => v.pause());
},
afterLoad: function(origin, destination) {
// 到达新屏幕时，自动播放带有 data-autoplay 属性的视频
const activeVideo = destination.item.querySelector('video[data-autoplay]');
if (activeVideo) activeVideo.play();
}
});
通过 responsiveWidth 配置，可以确保在移动设备上获得更好的浏览体验。媒体控制回调则常用于管理背景视频的播放。
五、核心 API 方法速查
| 方法 |
说明 |
fullpage_api.moveSectionDown() |
向下滚动一屏 |
fullpage_api.moveSectionUp() |
向上滚动一屏 |
fullpage_api.moveTo(section, slide) |
跳转到指定的第几屏（从1开始）和第几张幻灯片 |
fullpage_api.silentMoveTo(section, slide) |
无动画静默跳转 |
fullpage_api.setAllowScrolling(false) |
禁止滚动（常用于弹出模态框时） |
fullpage_api.setScrollingSpeed(1000) |
动态修改滚动速度 |
fullpage_api.reBuild() |
动态添加或删除 .section 后，调用此方法重建实例 |
六、最佳实践与常见问题
| 场景 |
推荐做法 |
常见错误 |
| 移动端体验 |
设置 responsiveWidth: 768 或 responsiveHeight 进行断点降级。 |
不做响应式处理，导致移动端操作卡顿或异常。 |
| 图片/视频性能 |
使用 data-src 属性并设置 lazyLoading: true 实现懒加载。 |
所有媒体资源直接使用 src 加载，导致首屏加载过慢。 |
| 插件冲突 |
需要时调用 setAllowScrolling(false) 临时禁用 fullPage 滚动。 |
与 Swiper 等其他滚动插件同时使用，造成事件冲突。 |
| 动态内容 |
通过 JS 动态添加 .section 后，必须调用 fullpage_api.reBuild()。 |
忘记重建，新增的屏幕无法被 fullPage 识别和控制。 |
| SEO与分享 |
务必设置 anchors 参数，并依赖其内置的降级机制。 |
仅使用索引跳转，导致分享出去的链接无法定位到具体屏。 |
| 商业授权 |
购买商业授权后，在配置中填入正确的 licenseKey。 |
直接删除页面底部的版权文字，可能导致功能受限。 |
七、生态与配套工具
- 官方框架封装：
react-fullpage（React）、@fullpage/vue-fullpage（Vue），让你能在现代前端框架中无缝使用。
- 动画增强：结合 GSAP 等动画库，在
afterLoad / onLeave 回调中实现复杂的入场离场动画。
- 无代码平台：在 Webflow、Framer 等设计工具中，通过嵌入自定义代码块即可集成 fullPage.js 效果。
八、总结
fullPage.js 至今仍是构建高端沉浸式单页网站的优秀选择。它 API 设计简洁、文档完善、社区活跃，并且在极小的体积下提供了极其流畅的滚动体验。只要应用在合适的场景，它几乎是没有竞品可替代的。
立即开始：
发表于 6 天前
|
查看: 17|
回复: 0
