首页 > 网络编程 > JavaScript > javascript技巧 > fullPage.js全屏滚动展示

fullPage.js全屏滚动展示完整实战教程(2025最新版)

2025-12-19 10:50:43 作者：Chandler读书学习

fullPage.js是一款知名的JavaScript插件,专为创建全屏滚动效果而设计,这篇文章主要介绍了fullPage.js全屏滚动展示的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

fullPage.js 完整实战教程（2025 最新版）

逻辑清晰 · 内容具体 · 可直接复制运行

一、什么是 fullPage.js？

fullPage.js 是由西班牙开发者 Álvaro Trigo 创建并持续维护的超轻量级全屏滚动库（当前最新版本 4.x），专为打造沉浸式单页网站而生。

文件大小：仅 ~15KB（gzip 后 < 8KB）
无 jQuery 依赖（纯原生 JS）
支持垂直全屏滚动 + 水平 Slide 滑动
完美支持移动端触摸、键盘、鼠标滚轮
内置锚点链接、懒加载、响应式降级
开源 GPLv3 许可，商业项目可购买授权

官网：https://alvarotrigo.com/fullPage/

GitHub：https://github.com/alvarotrigo/fullPage.js

二、核心理念与工作原理

理念	说明
快照式滚动（Snap Scrolling）	滚动时不连续滑动 → 吸附到下一个全屏 section，像 PPT 翻页
滚动劫持	拦截原生滚动事件，用 CSS3 transform 或 JavaScript 控制位置
Section + Slide 结构	垂直方向用 `.section`，水平方向用 `.slide`，层次清晰
状态驱动 + 事件回调	所有交互通过 `onLeave`、`afterLoad`、`afterSlideLoad` 等回调控制
渐进增强	JS 失效时自动降级为普通长页面，SEO 友好

三、适用场景与不适用场景

强烈推荐场景	谨慎使用 / 不推荐场景
品牌官网、产品发布页	内容密集型博客、新闻站
创意作品集、设计师/摄影师个人站	需要精确像素级滚动定位的仪表盘
H5 营销活动页、年会邀请函	超长表单页面
移动端引导页、App 落地页	传统多页企业站（除非只有首页用全屏）
在线简历、交互式故事网站	管理后台、复杂数据表格页面

四、快速上手：完整可运行 Demo

基础垂直全屏滚动（最常用）

<!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" 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>第一屏 - 首页</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,           // 启用全屏滚动（默认 true）
    scrollHorizontally: true,      // 水平 slide 可用键盘左右方向键
    navigation: true,              // 右侧小圆点导航
    navigationPosition: 'right',
    anchors: ['home', 'about', 'products', 'contact'], // 锚点，URL 可直接 #about
    lazyLoading: true,             // 懒加载图片/video
    scrollingSpeed: 800,           // 滚动动画时长 ms
    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>

进阶：带水平 Slide + 响应式降级 + 视频自动播放

new fullpage('#fullpage', {
  licenseKey: 'YOUR_LICENSE_KEY', // 商业项目需填写
  anchors: ['page1', 'page2', 'gallery', 'contact'],
  menu: '#menu',                   // 与顶部导航联动
  navigation: true,
  slidesNavigation: true,          // 水平 slide 底部小点
  responsiveWidth: 1024,           // 宽度 < 1024px 时关闭全屏滚动，恢复普通滚动
  parallax: true,                  // 需要购买 parallax 扩展
  fadingEffect: true,              // 需要购买 fadingEffect 扩展

  // 视频/音频自动播放控制
  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 速查表（最常用）

方法	说明
`fullpage_api.moveSectionDown()`	向下滚动一屏
`fullpage_api.moveSectionUp()`	向上滚动一屏
`fullpage_api.moveTo(section, slide)`	跳转到指定 section（从1开始）与 slide
`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 加载，首屏加载慢
与其他滚动插件冲突	关闭 fullPage 滚动：`setAllowScrolling(false)`	同时使用 swiper + fullpage
动态添加 section	添加完 DOM 后立即调用 `fullpage_api.reBuild()`	忘记 rebuild 导致新 section 无效
SEO 与分享链接	必须设置 `anchors` 并保留默认滚动降级	只用索引跳转，分享链接无效
商业项目去掉底部版权文字	购买商业授权后填写 `licenseKey`	直接删 DOM 删除（会被检测）

七、推荐配套工具

官方 React 包装：react-fullpage
官方 Vue 包装：@fullpage/vue-fullpage
动画增强：GSAP + fullpage 的 afterLoad / onLeave 回调
无代码平台：在 Webflow、Framer、Readymag 中直接嵌入自定义代码即可

八、结语

fullPage.js 依然是 2025 年打造高端沉浸式单页网站的最佳选择之一。它 API 简洁、文档完善、社区活跃、更新频繁。只要用在合适场景，几乎没有竞品能在同等体积下提供如此丝滑的体验。

立即上手：

官方在线示例合集：https://alvarotrigo.com/fullPage/examples/

CDN 快速引用：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullpage.js@4/dist/fullpage.min.css" rel="external nofollow"  rel="external nofollow" >
<script src="https://cdn.jsdelivr.net/npm/fullpage.js@4/dist/fullpage.min.js"></script>

祝你做出炫酷的全屏滚动网站！

到此这篇关于fullPage.js全屏滚动展示的文章就介绍到这了,更多相关fullPage.js全屏滚动展示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！