fullpage.js當內容不滿一屏時解決方案

因為之前項目中需要實現滾屏的效果，所以采用fullpage.js來實現。在使用過程中遇到一些坑點所以特此記錄一下，防備以后用到。

github地址：

fullpage.js

官網地址：

fullpage

關於如何使用fullpage，github和官網上已經說的很詳細了再次就不多說了。

整體來說fullpage是個很牛的插件，兼容pc和移動端。

說說我遇到的問題吧，設計中存在內容不滿一屏的情況，所以找了很多帖子說用js控制重新計算最后一屏的方式，但是不行。

后來找到一個解決方法——改源碼

原文：Fullpage.js底部高度自定義fp-auto-height樣式無效的解決方案

HTML部分:

<div class="section section5">
  <!--這里是倒數第2屏-->		
</div>
<!--最后一屏開始-->
<div class="section" id="section-footer">
  <div id="footer-text">
    <!--這里寫底部版權信息等文字-->	
  </div>
</div>
<!--最后一屏結束-->

CSS部分：

#section-footer{
	background:#212020;
}
#section-footer #footer-text{
	height: 150px!important;/*設置尾屏高度*/
}

修改源碼fullpage.js,找到function performMovement(v)這個方法：

if (options.css3 && options.autoScrolling && !options.scrollBar) {
 
				//var translate3d = 'translate3d(0px, -' + v.dtop + 'px, 0px)';
				if (v.anchorLink == 'footer')//判斷當滾動到尾屏如何做
				{
					footer_a = $('#section-footer').height();
					footer_h = $('#footer-text').height();
					var translate3d = 'translate3d(0px, -' + (v.dtop - footer_a + footer_h) + 'px, 0px)';
				}
				else
				{
					var translate3d = 'translate3d(0px, -' + v.dtop + 'px, 0px)';
				}
				transformContainer(translate3d, true);
 
				setTimeout(function () {
					afterSectionLoads(v);
				}, options.scrollingSpeed);
			}
 
			// using jQuery animate

大概意思就是if一下當滾動到底部時再重新計算一下要滾動的高度．

因為判斷的是anchors．所以要在fullpage的參數配置里面最后加上footer，否則會判斷不到．

根據上面的帖子操作雖然解決了我的問題，但是我感覺不應該是這樣，這個插件的作者不可能會想不到存在不滿一屏的情況，所以我又仔細查看了一次文檔，果然不負所望

官網提供的example中有這種情況的實例

Auto-height sections

對比Github的源碼確實找到了相關的屬性

fp-auto-height

只需要在相應的section上添加fp-auto-height的class即可，這樣section的高度就會根據內容自動適應，不需要進行額外的調整

注意：之前我找過的帖子中也有提到的fp-auto-height，但是無效，是因為版本的問題，目前來說3.0版本是有這個屬性的，這也是GIthub上現在最新的版本