简介
fullPage.js可轻松创建全屏滚动网站(也称为单页网站)，同时也可在网站中添加横向滚动条，很多的官方和设计网站都会使用到它
目前github的star量33.1K
中文官网：https://alvarotrigo.com/fullPage/zh/ github地址：https://github.com/alvarotrigo/fullPage.js
效果预览
1、PC电脑端
电脑端效果
2、手机移动端
手机移动端效果
兼容性
fullPage.js 兼容所有的现代浏览器，以及一些旧版浏览器，如 Internet Explorer 9，Opera 12 等都能兼容。 可兼容支持 CSS3 的浏览器与非支持 CSS3 的浏览器，适用于旧版浏览器。 同时，手机、平板电脑和触摸屏电脑还提供触屏支持。
安装
// 通过npm安装下载 // 或直接去官网下载源码 npm i fullpage.js -S // 样式文件
// js文件
使用
// 每段定义为包含 section 类的元素 // section里就写你要展示的内容 // 默认情况下，第一个 section 代码段，将被视为主页 // 代码段应放在一个div包装（即 ） // 包装的div不能是 body 元素 Some section Some section Some section Some section
// 如果不想第一段为起始页 // 只需将 active 类添加到你想首先载入的段 Some section
// 为在代码段中创建横向滑块 // 在section中再嵌套slide就行 slide 1 slide 2 slide 3 slide 4
// js初始化 new fullpage('#fullpage', { // 是否自动滚动 autoScrolling:true, // 是否支持横向滚动 scrollHorizontally: true });
常用配置项
new fullpage('#fullpage', { // 是否自动滚动 autoScrolling:true, // 是否支持横向滚动 scrollHorizontally: true, // 滚动转换的速度（以毫秒为单位） scrollingSpeed:700, // 在 section 内部垂直居中 verticalCentered:true, // section 定义 CSS background-color 属性 sectionsColor:none, });
常用方法
new fullpage后，就可以拿到一个实例，这个实例可以调用方法
const fullPage = new fullpage('#fullpage',{}) // 向上滚动一个 section fullPage.moveSectionUp() // 向下滚动一个 section fullPage.moveSectionDown() //滚动到网站的第三个section fullPage.moveTo(3, 0)
常用回调函数
我们也可以监听一些常用的回调函数来做一些处理
new fullpage('#fullpage', { // 一屏滚动结束之后 // origin前一个section // destination进入的section afterLoad: function(origin,destination){ const loadedSection = this; //使用 index if(origin.index == 2){ alert("第3个section停止加载"); } }, // 离开 section // origin前一个section // destination进入的section onLeave: function(origin,destination){ const leavingSection = this; //离开第二个section后 if(origin.index == 1){ alert("前往第3个section！"); } else if(origin.index == 1){ alert("前往第1个section！"); } } });
好了，就介绍到这里了，如果想详细了解的话，可以去中文官方文档看看
觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧
