'FullPage with ScrollOverflow Options, when coming form section above need to starts scrolling from bottom

I was wondering if there was a way to accomplish something using FullPage with the Scrolloverflow options for a larger section. I have a few sections and some of them are scrollable;

If I scroll down sections, everything works as expected, autoScrolling is on, I jump from section to section and scroll within a section when it is a larger section. So far so good! :)
The issue is as follow;
When I use the anchor or the navigation to move to the last section for example after fullPage has rendered. And then scroll back up to the scrollable section, it doesn't show the entire section from the bottom but hides a part outside the scrollable element and start the section from the top...
I would love to be able basically to when we jump to a section below the scrollable section using the anchors or navigation, and then scrolling up, we would start the scrollable section from the bottom.

I tried to force the scroll to bottom by using CSS3 when coming from section above but the problem is that after this, when i scroll up it jumps to the section above and doesn't scroll to the top of section first and then jumps the section above...

Any suggestion?... Hope that make sense

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

jqueryfullpage.jsiscrolljavaplayframework


Solution 1:[1]

Thanks to Alvaro's Hint in the comment above. I had to use the IScroll Method but used it on the afterLoad callback and add the 'fp-auto-height' class to the 'scrollable' section

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

});

Solution 2:[2]

Solution that worked for me, hope it saves someone time.

var myFullpage = new fullpage('#pagepiling', {
        scrollOverflow: true,
        menu: '#menu',
        responsive: 780,
        onLeave: function(origin, destination, direction, trigger){
          if(direction == 'up'){
            setTimeout(function () {
                var instance = fullpage_api.getActiveSection().item.querySelector('.fp-scrollable').fp_iscrollInstance;
                instance.scrollTo(10, -10000, 1000);
                instance.refresh();
                console.log('we went down from the menu and are scrolling up while also scrolling the sections to bottom');
            }, 0);
        }
  },

Using jquery.scrollTo.min.js plugin & scrolloverflow.min.js. Also jQuery itself should be initiate beforehand

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 tomdelalune
Solution 2 user3615851

Related Questions