Fullpage.js全屏滾動經常使用配置項、方法及回調函數

Fullpage.js全屏滾動主要功能：
支持鼠標滾動
支持前進後退和鍵盤控制
多個回調函數
支持手機、平板觸摸事件
支持 CSS3 動畫
支持窗口縮放
窗口縮放時自動調整
可設置滾動寬度、背景顏色、滾動速度、循環選項、回調、文本對齊方式等等

配置項

//爲每一個section設置背景色
sectionsColor: ["#f00","#0f0","#00f"],
//用來控制slide幻燈片的箭頭，設置爲false，兩側的箭頭會消失
controlArrows: false,
//每一頁幻燈片的內容是否垂直居中
verticalCentered: false,
//字體是否隨着窗口縮放而縮放
resize: true,
//頁面滾動速度
scrollingSpeed: 700,
//定義錨連接，用戶能夠快速打開定位到某一頁面；不須要加"#"，不要和頁面中任意的id和name相同
anchors: ["page1","page2","page3"],
//是否鎖定錨連接
lockAnchors: true,
//定義section頁面的滾動方式，須要引入jquery.easings插件
easing:,
//是否使用css3 transform來實現滾動效果
css3: false,
//滾動到最頂部後是否連續滾動到底部
loopTop: true,
//滾動到最底部後是否連續滾動到頂部
loopBottom: true,
//橫向slide幻燈片是否循環滾動
loopHorizontal: false,
//是否循環滾動，不會出現跳動，效果很平滑
continuousVertical: true,
//是否使用插件滾動方式，設爲false後，會出現瀏覽器自帶的滾動條，將不會按頁滾動
autoScrolling: false,
//是否包含滾動條，設爲true，則瀏覽器自帶的滾動條會出現，頁面仍是按頁滾動，可是瀏覽器滾動條默認行爲也有效
scrollBar: true,
//設置每一個section頂部的padding，當咱們要設置一個固定在頂部的菜單、導航、元素等時使用
paddingTop: "100px",
//設置每一個section底部的padding，當咱們要設置一個固定在底部的菜單、導航、元素等時使用
paddingBottom: "100px",
//固定的元素，爲jquery選擇器；可用於頂部導航等
fixedElements: ".nav",
//是否可使用鍵盤方向鍵導航
keyboardScrolling: false,
//在移動設置中頁面敏感性，最大爲100，越大越難滑動
touchSensitivity: 5,
//設爲false，則經過錨連接定位到某個頁面再也不有動畫效果
animateAnchor: false,
//是否記錄歷史，能夠經過瀏覽器的前進後退來導航
recordHistory: true,
//綁定菜單，設定相關屬性和anchors的值對應後，菜單能夠控制幻燈片滾動
menu: '.nav',
//是否顯示導航，設爲true會顯示小圓點做爲導航
navigation: true,
//導航小圓點的位置，能夠設置爲left或者right
navigationPosition: right,
//鼠標移動到小圓點上時顯示出的提示信息
navigationTooltips: ["第一頁","第二頁","第三頁"],
//是否顯示當前頁面小圓點導航的提示信息，不須要鼠標移上
showActiveTooltip: true,
//是否顯示橫向幻燈片的導航
slidesNavigation: true,
//橫向幻燈片導航的位置，能夠爲top或者bottom
slidesNavPosition: bottom,
//內容超過滿屏時是否顯示滾動條，須要jquery.slimscroll插件
scrollOverflow: true,
//section選擇器
sectionSelector: ".section",
//slide選擇器
slideSelector: ".slide"複製代碼

方法

//向上滾動一頁
moveSectionUp();
//向下滾動一頁
moveSectionDown();
//滾動到第幾頁，第幾個幻燈片；頁面從1計算，幻燈片從0計算
moveTo(wection,slide);
//和moveTo同樣，可是沒有動畫效果
silentMoveTo(section,slide);
//幻燈片向右滾動
moveSlideRight();
//幻燈片向左滾動
moveSlideLeft();
//動態設置autoScrolling配置項
setAutoScrolling(boolean);
//動態設置lockAnchors配置項
setLockAnchors(boolean);
//動態設置recordHistory配置項
setRecordHistory(boolean);
//動態設置scrollingSpeed配置項
setScrollingSpeed(milliseconds);
//添加或刪除鼠標/滑動控制，第一個參數爲啓用、禁用；第二個參數爲方向，取值包含all、up、dowm、left、right，可使用多個，逗號分隔
setAllowScrolling(boolean,[directions]);
//銷燬fullpage特效，不寫type，fullpage給頁面添加的樣式和html元素還在；若是使用all，則樣式和html等所有被銷燬
destroy(type);
//從新更新頁面和尺寸，用於經過ajax請求後改變了頁面結構以後，重建效果
reBuild();複製代碼

回調函數

//滾動到某一section，且滾動結束後，會觸發一次此回調函數，函數接受anchorLink和index兩個參數，anchorLink是錨連接名稱，index是序號，從1計算
afterLoad(anchorLink,index);
//在離開一個section時，會觸發一次此回調函數；index是離開的頁面的序號，從1計算；nextIndex是滾動到的目標頁面的序號，從1開始計算；direction判斷往上滾動仍是往下滾動，值爲up或down。經過return false，能夠取消滾動
onLeave(index,nextIndex,direction);
//頁面結構生成後的回調函數，或者說頁面初始化完成後的回調函數
afterRender();
//瀏覽器窗口尺寸改變後的回調函數
afterResize();
//滾動到某一slide後的回調函數，與afterLoad相似
afterSlideLoad(anchorLink,index,slideAnchor,slideIndex);
//在離開一個slide時，觸發此回調函數，與onLeave相似
afterSlideLoad(anchorLink,index,slideIndex,direction,nextSlideIndex);複製代碼

Fullpage結合CSS3新屬性能夠完成很是炫酷的頁面，以下圖爲CSS3結合Fullpage.js實現的簡單的全屏滾動頁面。