2016-11-17 5 views
1

Ich fragte mich, ob es eine Möglichkeit, etwas mit FullPage mit den Scrolloflow Optionen für einen größeren Abschnitt zu erreichen. Ich habe ein paar Abschnitte und einige von ihnen sind scrollbar;FullPage mit ScrollOverflow Optionen, wenn Formular Abschnitt oben kommen müssen Scrollen von unten

Wenn ich scroll down Abschnitte, alles funktioniert wie erwartet, AutoScrolling ist eingeschaltet, ich spring von Abschnitt zu Abschnitt und blättern innerhalb eines Abschnitts, wenn es ein größerer Abschnitt ist. So weit, ist es gut! :)
Das Problem ist wie folgt;
Wenn ich den Anker oder die Navigation verwenden, um zum letzten Abschnitt zum Beispiel nach FullPage gerendert zu verschieben. Und dann zurück scrollen bis zum scrollbaren Abschnitt, es zeigt nicht den gesamten Abschnitt von unten, sondern verbirgt einen Teil außerhalb des scrollbaren Elements und starten Sie den Abschnitt von oben ...
Ich würde gerne im Grunde zu wann sein können Mit den Ankern oder der Navigation springen wir zu einem Bereich unterhalb des scrollbaren Bereichs und scrollen dann nach oben, um den scrollbaren Bereich von unten zu starten.

Ich habe versucht, die Rolle nach unten mit CSS3 zu zwingen, wenn aus dem obigen Abschnitt kommt, aber das Problem ist, dass danach, wenn ich nach oben scrollen, springt es zum obigen Abschnitt und nicht zum Anfang des Abschnitts und dann springt der Abschnitt oben ...

Jeder Vorschlag? ... Hoffnung, die Sinn

$('#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

Sie werden mit ihm zu tun haben im 'afterRender' Callback. Und wie in [dem Github-Thema, das Sie geöffnet haben] (https://github.com/alvarotrigo/fullPage.js/issues/2417) vorgeschlagen, müssen Sie [iScroll-Methoden] verwenden (http://iscrolljs.com/) damit klar kommen. – Alvaro

Antwort

2

Dank Alvaro Hint im Kommentar oben machen. Ich hatte die IScroll Methode zu verwenden, sondern verwendet es auf der Nachbelastung Rückruf und fügen Sie die ‚fp-Auto-height‘ Klasse zum ‚scrollbaren‘ Abschnitt

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) 
     } 
} 

}); 
Verwandte Themen