2016-11-17 14 views
1

大きなセクションのScrolloverflowオプションでFullPageを使用して何かを達成する方法があるのだろうかと思いました。私はいくつかのセクションを持ち、そのうちのいくつかはスクロール可能です。FullPage with ScrollOverflowオプション、フォームセクションが上に来るときに下からスクロールを開始する必要があります

セクションをスクロールすると、すべてが正常に動作し、自動スクロールがオンになり、セクション間でジャンプし、セクション内でスクロールします。ここまでは順調ですね! :)
問題は次のとおりです。
たとえば、fullPageがレンダリングされた後、アンカーまたはナビゲーションを使用して最後のセクションに移動するとします。そして、スクロール可能なセクションまでスクロールして、下からセクション全体を表示するのではなく、スクロール可能な要素の外側にある部分を隠し、上からセクションを開始します。
私は基本的にアンカーまたはナビゲーションを使用してスクロール可能なセクションの下のセクションにジャンプし、次にスクロールアップして、スクロール可能なセクションを下部から開始します。

上記のセクションから来たときにCSS3を使用してスクロールを強制的にスクロールしようとしましたが、その後、スクロールすると上のセクションにジャンプし、最初にセクションの先頭にスクロールしません。その後、上記のセクション...

任意の提案をジャンプ?...希望は、上記のコメントにアルバロのヒントには意味

$('#fullpage').fullpage({ 
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'], 
    navigationTooltips: ['one', 'two', 'three', 'four'], 
    navigation: true, 
    navigationPosition: 'right', 
    fitToSection: false, 
    scrollOverflow:true, 
    onLeave: function(index, nextIndex, direction){ 
     if((nextIndex == 2) && (direction =='up')) { 
     var scrollToBottom = $('.fp-scroller').height() - $(window).height(); 
     $('.fp-scroller').css({ 
      'transform' : 'translate(0px, -' + scrollToBottom + 'px) translateZ(0px)' 
     }); 
     } 
    }, 
}); 

JS FiDDLE

+0

あなたはそれに対処する必要がありますIScrollメソッドを使用しますが、後負荷のコールバックにそれを使用し、「スクロール可能」セクションに「FP-自動高さ」クラスを追加する必要がありました'afterRender'コールバックで呼び出します。そして、[あなたが開いたgithubのトピック](https://github.com/alvarotrigo/fullPage.js/issues/2417)で提案されているように、[iScrollメソッド](http://iscrolljs.com/)を利用する必要があります。 )それに対処する。 – Alvaro

答えて

2

感謝を作ること。私は

http://jsfiddle.net/photous/qn084vmn/

$('#fullpage').fullpage({ 
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'], 
    navigationTooltips: ['one', 'two', 'three', 'four'], 
    navigation: true, 
    navigationPosition: 'right', 
    fitToSection: false, 
    scrollOverflow:true, 
    afterLoad: function(anchorLink, index){ 
     var loadedSection = $(this); 
     var nextSection = loadedSection.next(); 
     var prevSection = loadedSection.prev(); 
     if(nextSection.hasClass('fp-auto-height')) { 
     var IScroll = nextSection.find('.fp-scrollable').data('iscrollInstance'); 
     IScroll.scrollTo(0, 0, 0) 
     } 
     if(prevSection.hasClass('fp-auto-height')) { 
     var IScroll = prevSection.find('.fp-scrollable').data('iscrollInstance'); 
     IScroll.scrollTo(0, IScroll.maxScrollY, 0) 
     } 
} 

}); 
関連する問題