fullpage.js最後一屏不滿一屏時，滾動方式

時間 2019-12-05

標籤 fullpage.js fullpage 最後不滿滾動方式欄目 JavaScript 简体版

原文原文鏈接

這兩天公司網頁改版用到fullpage.js這個滾屏插件，頁面內容整屏的滾動，不成問題，各類設置在網上也都有文檔。
而我遇到的問題就是，頁面內容不滿屏的時候，和上面的內容放一塊就太擠，單獨放一屏就太空，好尷尬的說
css

底部的footer部分就是我要單獨處理的部分，從網上搜了各類資料，總結了一下，我的覺着最簡單的方法，寫一篇文章以便之後查閱。html

<!--footer及倒數第二屏的HTML-->
    <body data-spy="scroll">
      <div id="dowebok" class="container-fluid">
        <div class="section" id="nextS">
            <div class="sect ">
                    <div class="sectcenter4"></div>
            </div>
            <div class="sect sectbg2">
                <div class="container">
                    <div class="sectcenter5"></div>
                </div>
            </div>
        </div>
        <div class="section footerss"><footer class="footer" id="footer"></footer></div>
      </div>
    </body>

//初始化滾屏的一些內容，最重要的是設置好錨點，這裏重點是最後一屏（footer）的錨點footerl
        $('#dowebok').fullpage({
            verticalCentered: false,
            resize: true,
            navigation: true,
            anchors: ['section-1', 'section-2', 'lastScreen','footerl'],
        });

寫完這些，實現的就是下面如圖的效果，整個footer佔了一屏，而且是垂直居中顯示的。

根據要實現的效果，要作的就是讓footer緊挨着#nextS這一屏（不垂直居中）+到#nextS這一屏的時候，再往下的滾動距離就不能是一屏了（必須是footer的高度）。
按着整個思路，先解決css的問題css3

.section.footerss .fp-tableCell{//修改最後一屏display屬性
        display: block!important;
    }
//實現footer緊挨着#nextS這一屏顯示，底部出現

下面修改fullpage.js的問題，在引用的fullpage.js文件中找到performMovement這個方法，按照以下方法，修改一下，就能夠達到想要的效果（footer緊挨着上一屏，而且滾動的高度是footer的height）web

function performMovement(v){  
  　　// using CSS3 translate functionality  
 　　 if (options.css3 && options.autoScrolling && !options.scrollBar) {  
  　　　　if (v.anchorLink == 'footerl'){ //當滾屏到最後一屏時間 
  　　　　　　footer_a = $('#nextS').height();//倒數第二屏的高度  
  　　　　　　footer_h = $('#footer').height();  //footer的高度
 　　　　　　 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  
 　　else{  
 　　　　var scrollSettings = getScrollSettings(v);  
 　　　　$(scrollSettings.element).animate(  
 　　　　　　scrollSettings.options  
 　　　　　　, options.scrollingSpeed, options.easing).promise().done(function () { //only one single callback in case of animating  `html, body`  
 　　　　　　afterSectionLoads(v);  
 　　　　　});  
 　　}  
 }

這樣修改了以後，就不用擔憂最後一屏不滿屏的問題了。promise