FullPage.js-基於 jQuery 的插件全屏滾動插件

fullPage.js 是一個基於 jQuery 的插件，它可以很方便、很輕鬆的製做出全屏網站。現在咱們常常能見到全屏網站，尤爲是國外網站。這些網站用幾幅很大的圖片或色塊作背景，再添加一些簡單的內容，顯得格外的高端大氣上檔次。若是你也但願你的網站能設計成全屏的，顯得更上檔次，你能夠試試 fullPage.js。

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

fullPage 2.7.8

使用說明

一、引入插件文件

這個插件依賴於jQuery，因此你還須要下載jQuery，而且在Fullpage插件以前引入。

<link rel="stylesheet" type="text/css" href="/fullpage/jquery.fullPage.css" />
<script src="/fullpage/jquery.min.js"></script>
<script type="text/javascript" src="/fullpage/jquery.fullPage.js"></script>

若是你須要自定義頁面滾動的效果，你須要引入jquery.easings.min.js文件。

<script src="/fullpage/jquery.easings.min.js"></script>

對於內容比較多的頁面，能夠設置右側的滾動條，可是默認狀況下沒法滾動，你須要jquery.slimscroll.min.js文件來自定義滑條滾動效果。

<script type="text/javascript" src="/fullpage/jquery.slimscroll.min.js"></script>

最後，若是你不想下載到項目中，您可使用開源項目CDN服務，Fullpage在CDNJS的地址：https://cdnjs.com/libraries/fullPage.js

二、編寫HTML代碼

默認狀況下，每一屏幕的代碼都須要有DIV包裹，而且設置DIV的類名爲section，默認狀況下，第一個setion將做爲首頁顯示在頁面上。

<div id="fullpage'">
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>

假如你須要讓某一個section做爲首頁的第一屏展現，你只須要給這個section添加一個active的類，Fullpage會自動優先展現這個屏幕，例如定義下面的代碼：

<div class="section active">Some section</div>

Fullpage自帶左右滑動的幻燈片，只須要在section中添加DIV元素，而且給DIV元素添加slide類，FUllpage會自動生成幻燈片特效，例以下面的代碼：

<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide"> Slide 2 </div>
<div class="slide"> Slide 3 </div>
<div class="slide"> Slide 4 </div>
</div>

三、初始化Fullpage

使用jQuery的文檔加載完畢之後執行函數，初始化Fullpage插件。

$(document).ready(function() {
$('#fullpage').fullpage();
});

全部的選項設置更復雜的初始化可能看起來像這樣：

$(document).ready(function() {
	$('#fullpage').fullpage({
		//Navigation
		menu: false,//綁定菜單，設定的相關屬性與anchors的值對應後，菜單能夠控制滾動，默認爲false。
		anchors:['firstPage', 'secondPage'],//anchors定義錨連接，默認爲[]
		lockAnchors: false,//是否鎖定錨連接，默認爲false,設爲true後連接地址不會改變
		navigation: false,//是否顯示導航，默認爲false
		navigationPosition: 'right',//導航小圓點的位置
		navigationTooltips: ['firstSlide', 'secondSlide'],//導航小圓點的提示
		showActiveTooltip: false,//是否顯示當前頁面的tooltip信息
		slidesNavigation: true,//是否顯示橫向幻燈片的導航，默認爲false
		slidesNavPosition: 'bottom',//橫向導航的位置，默認爲bottom，能夠設置爲top或bottom
		 
		//Scrolling
		css3: true,//是否使用CSS3 transforms來實現滾動效果，默認爲true
		scrollingSpeed: 700,//設置滾動速度，單位毫秒，默認700
		autoScrolling: true,//是否使用插件的滾動方式，默認爲true,若爲false則會出現瀏覽器自帶滾動條
		fitToSection: true,//設置是否自適應整個窗口的空間，默認值：true
		scrollBar: false,//是否包含滾動條，默認爲false,若爲true瀏覽器自帶滾動條出現
		easing: 'easeInOutCubic',//定義頁面section滾動的動畫方式，若修改此項需引入jquery.easing插件
		easingcss3: 'ease',//定義頁面section滾動的過渡效果，若修改此項需引入第三方插件
		loopBottom: false,//滾動到最低部後是否連續滾動到頂部，默認爲false
		loopTop: false,//滾動到最頂部後是否連續滾動到底部，默認爲false
		loopHorizontal: true,//橫向slide幻燈片是否循環滾動，默認爲true
		continuousVertical: false,//是否循環滾動，不兼容loopTop和loopBottom選項
		normalScrollElements: '#element1, .element2',//避免自動滾動，滾動時的一些元素，例如百度地圖
		scrollOverflow: false,//內容超過滿屏後是否顯示滾動條，true則顯示滾動條，若需滾動查看內容還須要jquery.slimscroll插件的配合
		touchSensitivity: 15,//在移動設備中滑動頁面的敏感性，默認爲5最高100，越大越難滑動
		normalScrollElementTouchThreshold: 5,
		 
		//Accessibility
		keyboardScrolling: true,//是否可使用鍵盤方向鍵導航，默認爲true
		animateAnchor: true,//錨連接是否能夠控制滾動動畫，默認爲true,若爲false則錨連接定位失效
		recordHistory: true,//是否記錄歷史，默認爲true,瀏覽器的前進後退可導航。若autoScrolling:false,那麼這個屬性將被關閉
		 
		//Design
		controlArrows: true,//定義是否經過箭頭來控制slide,默認true
		verticalCentered: true,//定義每一頁的內容是否垂直居中，默認true
		resize : false,//字體是否隨窗口縮放而縮放，默認false
		sectionsColor : ['#ccc', '#fff'],//爲每一個section設置background-color屬性
		paddingTop: '3em',設置每個section頂部的padding,默認爲0
		paddingBottom: '10px',設置每個section底部的padding,默認爲0
		fixedElements: '#header, .footer',固定元素，默認爲null,須要配置一個jquery選擇器，在頁面滾動時，fixElements設置的元素不滾動
		responsiveWidth: 0,
		responsiveHeight: 0,
		 
		//Custom selectors
		sectionSelector: '.section',//section選擇器。默認爲.section
		slideSelector: '.slide',//slide選擇器，默認爲.slide
		 
		//events
		onLeave: function(index, nextIndex, direction){},
		afterLoad: function(anchorLink, index){},
		afterRender: function(){},
		afterResize: function(){},
		afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
		onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
	});
});

參數說明

menu

默認值：false，一個選擇器能夠用來指定要與滾動互動的導航菜單，有點相似與Bootstrap的滾動監聽。這樣到滾動到某個section時，對應的菜單會被自動添加active類。

注意，這個選項不會自動生成一個導航菜單，僅僅是給指定的菜單中當前菜單項添加一個active活動類。

爲了讓自定義導航菜單和屏幕section互動，須要給菜單添加一個HTML5的自定義屬性（data-menuanchor），須要和錨文本設置相同的內容，例以下面的示例代碼：

<ul id="myMenu">
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
    <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
    <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
</ul>

$('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
    menu: '#myMenu'
});

注意：注意這個自定義的菜單代碼應該放置到插件設置的內容外面，避免由於排版不兼容問題可使用css3:true，不然將被附加到body的插件自己。

anchors

默認值：[]，定義導航的錨文本信息例如（#example），每一個導航文本以前用英文逗號（,）分隔，快速導航的錨文本URL也是使用的這個文本，瀏覽器經過此錨文本連接能夠支持前進和後退按鈕功能。

此選項的設置還能夠做爲用戶的書籤，當用戶打開帶有錨文本的URL時，Fullpage能夠自動跳轉到對應的section屏幕或者slide幻燈片位置。

注意，若是你使用了此選項，那麼網頁中不能有相同的ID，一來Fullpage插件沒法準確的定位到section屏幕或者slide幻燈片位置，二來這也有悖網頁中CSS的編寫規範。

lockAnchors

默認值：false，肯定是否在URL中的錨點將在插件有任何影響。你仍然可使用錨內部本身的函數和回調，但他們不會有任何做用，在網站的滾動。若是你想把fullpage.js在URL使用錨其餘插件。

注意，這樣的設置有助於瞭解anchors選項在側邊欄菜單的對應關係，與類的元素的值。經過.section它在標記的位置。

navigation

默認值：false，若是設置爲true，那他將會顯示一個小圓圈組成的快速導航欄。

navigationPosition

默認值：none，結合參數navigation一塊兒使用，用於設置navigation定義的菜單顯示的位置，能夠設置爲left/right。

navigationTooltips

默認值：[]，定義當navigation設置爲true的時候，鼠標移動到快速導航上面的提示文本，每一個屬性中間用英文半角逗號（,）隔開。

showActiveTooltip

默認值：false，設置是否自動顯示navigationTooltips中設置的工具提示文本。

slidesNavigation

默認值：false，使用方法同navigation，不過這個參數設置的導航顯示位置不一樣，並且這個是用戶設置幻燈片的。

slidesNavPosition

默認值：bottom，定義slidesNavigation中設置的導航菜單顯示的位置，可選的設置值爲top/bottom，你可能要修改CSS樣式肯定的距離從頂部或底部以及任何其餘風格如顏色。

css3

默認值：true，肯定是否使用JavaScript和CSS3轉換滾動在切片和幻燈片。加快平板電腦和移動設備的瀏覽器支持CSS3的運動有益。若是此選項設置爲true，瀏覽器不支持CSS3，jQuery回調函數將被替代。

scrollingSpeed

默認值：700，每一個屏幕滾動動畫執行的時間，時間的單位爲毫秒（ms）。

autoScrolling

默認值：true，定義屏幕是否自動滾動，仍是須要用戶觸發事件滾動，它也影響了部分適合在平板電腦和手機瀏覽器/設備窗口。

fitToSection

默認值：true，設置是否自適應整個窗口的空間，以某個section的內容爲分界線，設置爲true時，某個的section將填充到整個頁面，否者用戶能夠停留在網頁的任何位置。

scrollBar

默認值：false，定義是否使用瀏覽器默認的滾動條，若是使用瀏覽器默認的滾動條，autoScrolling配置任然生效，用戶也能夠自由滾動的網站與滾動條和fullpage.js將適合的部分在屏幕滾動時完成。

easing

默認值：easeInOutCubic，定義了用於垂直和水平滾動的過渡效果，它要求文件vendors/jquery.easings.min.js或者jQuery UI插件，具體的動畫效果你能夠參考 easings插件介紹 ，你也可使用其它的動畫插件庫。

easingcss3

默認值：ease，定義在滾動屏幕中使用css3:true設置的過分效果，你可使用 CSS3 transition-timing-function 屬性 自定義多個動畫效果，例如：linear、ease-out、……，或者使用cubic-bezier方法建立自定義的動畫效果，你可能想要使用 Matthew Lein CSS Easing Animation Tool 建立這個。

loopBottom

默認值：false，定義屏幕滾動到最後一個後，是否循環滾動到第一個。

loopTop

默認值：false，定義屏幕滾動到第一個後，是否循序滾動到最後一個。

loopHorizontal

默認值：true，定義水平的幻燈片是否循環切換。

continuousVertical

默認值：false，定義向下滾動到最後一節是否應該向下滾動到第一個，若是向上滾動的第一部分應該滾動到最後一個。不兼容loopTop和loopBottom選項。

normalScrollElements

默認值：null，若是你想避免自動滾動，滾動時的一些元素，這是你須要使用的選項。（有用的地圖，滾動div等）須要對這些元素的jQuery選擇器字符串。例如：normalScrollElements: ‘#element1, .element2’。

scrollOverflow

默認值：false，設置當內容超過屏幕的高度的時候，是否裁切多餘的內容。

• 當設置爲true時，你的內容將會被自動裁切，能夠考慮當afterRender回調函數調用的時候，處理你的內容的多少或者使用其它的插件庫合理的處理多餘的內容。
• 當設置爲false時，插件不會自動裁切多餘的內容，可是剩下沒有顯示的內容任然不能顯示，此時，你可使用 jquery.slimscroll.min插件來自定義滾動事件，若是要使用這個插件，應該在Fullpage插件以前引入，例以下面的代碼：

<script type="text/javascript" src="vendors/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>

touchSensitivity

默認值：5，定義了瀏覽器窗口的寬度/高度的百分比，多遠的觸摸滑動能夠跳轉到下一個section / slide。

normalScrollElementTouchThreshold

默認值：5，定義了一個數字，測試HTML標籤樹的機構，是否在在移動設備上支持觸摸事件。

keyboardScrolling

默認值：true，定義是否能夠經過鍵盤箭頭事件控制section的滾動。

animateAnchor

默認值：true，定義當網頁的URL中有錨文本的時候，是否幫用戶定位到對應的section或者slide。

recordHistory

默認值：true，定義是否將網頁滾動的的狀態紀錄到瀏覽器的歷史記錄中。

• 當設置爲true時，每個section/slide滾動的狀態將紀錄到瀏覽器的歷史紀錄中，這樣的設置有利於用戶方便回退到剛纔瀏覽的內容。
• 當設置爲false時候，用戶的瀏覽路徑不會記錄到瀏覽器的歷史紀錄中，若是要取消這個選項可使用autoScrolling:false。

controlArrows

默認值：true，決定是否使用控制箭頭向左或向右移動幻燈片。

verticalCentered

默認值：true，決定是否初始化後，是否垂直居中網頁的內容，若是你想自定義元素的位置，那麼你能夠設置爲false，在插件初始化後調用afterrender回調函數加載其它的腳本庫設置你網頁的內容。

resize

默認值：true，是否在窗口改變大小後，自動調整網頁中字體的大小。

sectionsColor

默認值：none，定義每一個section的CSS背景演示，例以下面的代碼：

$('#fullpage').fullpage({
  sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});

若是設置的參數不對稱，好比屏幕個數多餘設置的顏色個數，那麼多餘的屏幕默認沒有背景顏色，若是屏幕個數少於設置的顏色個數，那麼多餘的顏色將不顯示。

paddingTop

默認值：0，定義每一個section固定的頭部留白，例如設置paddingTop: ’10px’、 paddingTop: ’10em’、……，在使用固定表頭的狀況下有用的。

paddingBottom

默認值：0，定義每一個section固定的底部留白，例如設置paddingBottom: ’10px’、 paddingBottom: ’10em’、……，在使用固定底部導航的狀況下有用的。

fixedElements

默認值：null，定義的某個元素是否在網頁的固定位置，元素將被關閉的插件是必要的時候，使用CSS3的選項保持滾動結構固定。它須要對這些元素的jQuery選擇器字符串。例如：fixedElements: ‘#element1, .element2’。

responsiveWidth

默認值：0， A normal scroll (autoScrolling:false) will be used under the defined width in pixels. A class fp-responsive is added to the plugin’s container in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser’s width is less than 900 the plugin will scroll like a normal site.

responsiveHeight

默認值：0， A normal scroll (autoScrolling:false) will be used under the defined height in pixels. A class fp-responsive is added to the plugin’s container in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser’s height is less than 900 the plugin will scroll like a normal site.

sectionSelector

默認值：.section，定義用於選擇全屏滾動內容的jQuery選擇器。它可能須要改變，有時爲了不與其餘插件使用相同的選擇器做爲整版的問題。

slideSelector

默認值：.slide，定義用於插件幻燈片jQuery選擇器。它可能須要改變，有時爲了不與其餘插件使用相同的選擇器fullpage.js問題。

onLeave (index, nextIndex, direction)

滾動前的回調函數，接收 index、nextIndex 和 direction 3個參數

• index 是離開的「頁面」的序號，從1開始計算；
• nextIndex 是滾動到的「頁面」的序號，從1開始計算；
• direction 判斷往上滾動仍是往下滾動，值是 up 或 down。

$('#fullpage').fullpage({
    onLeave: function(index, nextIndex, direction){
        var leavingSection = $(this);
        //after leaving section 2
        if(index == 2 && direction =='down'){
            alert("Going to section 3!");
        }
        else if(index == 2 && direction == 'up'){
            alert("Going to section 1!");
        }
    }
});

取消section的滾動

你能夠在onLeave 回調函數中返回false，那麼將取消滾動。

$('#fullpage').fullpage({
    onLeave: function(index, nextIndex, direction){
        //it won't scroll if the destination is the 3rd section
        if(nextIndex == 3){
            return false;
        }
    }
});

afterLoad (anchorLink, index)

滾動到某一屏後的回調函數，接收 anchorLink 和 index 兩個參數。

• anchorLink 是錨連接的名稱
• index 是section的索引，從1開始計算

在沒有設置錨文本的狀況下，只有使用惟一的index參數。

$('#fullpage').fullpage({
	anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
	afterLoad: function(anchorLink, index){
		var loadedSection = $(this);
		//using index
		if(index == 3){
			alert("Section 3 ended loading");
		}
		//using anchorLink
		if(anchorLink == 'secondSlide'){
			alert("Section 2 ended loading");
		}
	}
});

afterRender()

這個回調函數只是在生成頁面結構的時候調用。這是要用來初始化其餘插件或刪除任何須要的文件準備好代碼的回調（這個插件修改DOM建立獲得的結構）。

$('#fullpage').fullpage({
    afterRender: function(){
        var pluginContainer = $(this);
        alert("The resulting DOM structure is ready");
    }
});

afterResize()

這個回調函數在窗口發生大小改變的時候被調用，就在部分調整。

$('#fullpage').fullpage({
    afterResize: function(){
        var pluginContainer = $(this);
        alert("The sections have finished resizing");
    }
});

afterSlideLoad (anchorLink, index, slideAnchor, slideIndex)

滾動到某一水平滑塊後的回調函數，與 afterLoad 相似，接收 anchorLink、index、slideIndex、direction 4個參數。

• anchorLink: anchorLink corresponding to the section.
• index: index of the section. Starting from 1.
• slideAnchor: anchor corresponding to the slide (in case there is)
• slideIndex: index of the slide. Starting from 1. (the default slide doesn’t count as slide, but as a section)

在沒有anchorlinks的幻燈片或幻燈片SlideIndex參數是惟一使用定義的狀況下。

$('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
 
    afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
        var loadedSlide = $(this);
 
        //first slide of the second section
        if(anchorLink == 'secondPage' && slideIndex == 1){
            alert("First slide loaded");
        }
 
        //second slide of the second section (supposing #secondSlide is the
        //anchor for the second slide
        if(index == 2 && slideIndex == 'secondSlide'){
            alert("Second slide loaded");
        }
    }
});

onSlideLeave (anchorLink, index, slideIndex, direction, nextSlideIndex)

某一水平滑塊滾動前的回調函數，與 onLeave 相似，接收 anchorLink、index、slideIndex、direction 4個參數。

• anchorLink: anchorLink corresponding to the section.
• index: index of the section. Starting from 1.
• slideIndex: index of the slide. Starting from 0.
• direction: takes the values right or left depending on the scrolling direction.
• nextSlideIndex: index of the destination slide. Starting from 0.

$('#fullpage').fullpage({
    onSlideLeave: function( anchorLink, index, slideIndex, direction, nextSlideIndex){
        var leavingSlide = $(this);
 
        //leaving the first slide of the 2nd Section to the right
        if(index == 2 && slideIndex == 0 && direction == 'right'){
            alert("Leaving the fist slide!!");
        }
 
        //leaving the 3rd slide of the 2nd Section to the left
        if(index == 2 && slideIndex == 2 && direction == 'left'){
            alert("Going to slide 2! ");
        }
    }
});

取消slide滑動

你能夠設置回調函數onSlideLeave 返回false，那麼他將阻止這次的滑動事件，就像onLeave同樣。

Fullpage方法函數

	$.fn.fullpage.moveSectionUp();//向上滾動一頁
	$.fn.fullpage.moveSectionDown();//向下滾動一頁
	$.fn.fullpage.moveTo(section,slide);//從1開始，slide從0開始
	$.fn.fullpage.silentMoveTo(section,slide);//和moveTo同樣，可是沒有滾動效果
	$.fn.fullpage.moveSlideRight();//幻燈片向右滾動
	$.fn.fullpage.moveSlideLeft();//幻燈片向左滾動
	$.fn.fullpage.setAutoScrolling(boolean);//動態設置autoScrolling
	$.fn.fullpage.setLockAnchors(boolean);//動態設置lockAnchors
	$.fn.fullpage.setRecordHistory(boolean);//動態設置recordHistory
	$.fn.fullpage.setScrollingSpeed(milliseconds);//動態設置scrollingSpeed
	$.fn.fullpage.destory(type);//銷燬fullpage,type能夠不寫或者使用all
	$.fn.fullpage.reBuild();/從新更新頁面和尺寸，用於ajax請求改變頁面結構後重建效果

moveSectionUp()

設置section向上滾動

$.fn.fullpage.moveSectionUp();

moveSectionDown()

設置section向下滾動

$.fn.fullpage.moveSectionDown();

moveTo(section, slide)

設置屏幕滾動到某個section或者slide，兩個參數都是某個內容塊的索引值或者是錨文本，默認狀況下slide的索引被設置爲0。

/*Scrolling to the section with the anchor link `firstSlide` and to the 2nd Slide */
$.fn.fullpage.moveTo('firstSlide', 2);
 
//Scrolling to the 3rd section in the site
$.fn.fullpage.moveTo(3, 0);
 
//Which is the same as
$.fn.fullpage.moveTo(3);

silentMoveTo(section, slide)

這個函數的用法和MoveTo方法徹底同樣，只是MoveTo在切換的時候有動畫效果，而silentMoveTo方法在切換的時候沒有動畫效果，直接跳轉到對應的section中。

/*Scrolling to the section with the anchor link `firstSlide` and to the 2nd Slide */
$.fn.fullpage.silentMoveTo('firstSlide', 2);

moveSlideRight()

設置幻燈片向右滑動，將下一個幻燈片顯示在當前的屏幕中。

$.fn.fullpage.moveSlideRight();

moveSlideLeft()

設置幻燈片向左滑動，將上一個幻燈片顯示在當前的屏幕中。

$.fn.fullpage.moveSlideLeft();

setAutoScrolling(boolean)

能夠實時的控制頁面滾動的方式，可選的參數false/true。

• 若是參數被設置爲true，全部的section將自動滾動。
• 若是參數被設置爲false，全部的section將不會自動滾動，須要用戶手動或者使用瀏覽器的滑條滾動網頁。

注意，scrollOverflow參數若是設置爲true，它可能很難滾動鼠標滾輪或觸摸板當部分滾動。

$.fn.fullpage.setAutoScrolling(false);

setFitToSection(boolean)

該函數設置選項fitToSection肯定是否自適應section在屏幕上。

$.fn.fullpage.setFitToSection(false);

setLockAnchors(boolean)

設置選項lockAnchors肯定將錨文本鎖定到URL中。

$.fn.fullpage.setLockAnchors(false);

setAllowScrolling(boolean, [directions])

添加或者禁止Fullpage自動綁定的鼠標滑輪和移動觸摸事件，不過用戶任然能夠經過鍵盤和點擊快速導航的方式切換section/slide。要取消鍵盤事件你應該使用setKeyboardScrolling方法。

• directions，可選參數，能夠設置的值：all, up, down, left, right或者設置組合的參數，例如down, right，他設置的兩個方向上將禁止或者激活滾動。

//disabling scrolling
$.fn.fullpage.setAllowScrolling(false);
 
//disabling scrolling down
$.fn.fullpage.setAllowScrolling(false, 'down');
 
//disabling scrolling down and right
$.fn.fullpage.setAllowScrolling(false, 'down, right');

setKeyboardScrolling(boolean, [directions])

添加或者禁止鍵盤對section/slide的控制，這個事件是默認綁定的。

• directions，可選參數，能夠設置的值：all, up, down, left, right或者設置組合的參數，例如down, right，他設置的兩個方向上將禁止或者激活鍵盤的滾動。

//disabling all keyboard scrolling
$.fn.fullpage.setKeyboardScrolling(false);
 
//disabling keyboard scrolling down
$.fn.fullpage.setKeyboardScrolling(false, 'down');
 
//disabling keyboard scrolling down and right
$.fn.fullpage.setKeyboardScrolling(false, 'down, right');

setRecordHistory(boolean)

定義是否爲每一個URL的變動紀錄到瀏覽器中的歷史記錄中。

$.fn.fullpage.setRecordHistory(false);

setScrollingSpeed(milliseconds)

定義每一個section/slide滾動的時間，默認的時間單位爲毫秒（ms）。

$.fn.fullpage.setScrollingSpeed(700);

destroy(type)

移除Fullpage的事件和添加的HTML/CSS樣式風格，理想的使用在使用Ajax加載內容。

• type：能夠被設置爲空字符，或者all，若是一旦執行，經過Fullpage添加的HTML/CSS樣式和代碼都將會被移除，將顯示沒有使用Fullpage的樣式，一個使用過任何插件進行修改。

//destroy any plugin event (scrolls, hashchange in the URL...)
$.fn.fullpage.destroy();
 
//destroy any plugin event and any plugin modification done over your original HTML markup.
$.fn.fullpage.destroy('all');

reBuild()

更新DOM結構以適應新的窗口大小或其內容。理想的使用與Ajax調用或外部網站的DOM結構的變化組合。

$.fn.fullpage.reBuild();

資源延時加載

fullpage.js提供了一種懶加載圖像，視頻和音頻元素，因此他們不會放慢您的網站加載或沒必要要的浪費數據傳輸。使用延遲加載時，全部這些元素只會加載時進入視口。啓用延遲加載，全部你須要作的是改變你的src屬性的data-src以下圖所示：

<img data-src="image.png">
<video>
  <source data-src="video.webm" type="video/webm" />
  <source data-src="video.mp4" type="video/mp4" />
</video>

備註：僅用於保存查看，文章原網頁，http://fullpage.81hu.com/