Normal scrolling after one section

[agaletta]

Hi, I have a scrolling vertical section in 100% height of viewport for each section. Under last section i have a footer. I would set autoScrolling to false when i'm in last section because i need to set normal scrolling behaviour and then, in direction up, re-set autoScrolling to true.

My code:

  var actualIndexSlide;
  var totalSlides = $('main > section.section').length;
  $('#main').fullpage({
    // autoScrolling: true,
    css3: true,
    verticalCentered: false,
    touchSensitivity: 15,
    easing: 'easeInCirc',
    normalScrollElements: '.fd-footer',
    resize: false,
    scrollingSpeed: 700,

    afterRender: function(){
      console.log("rendered");
      $('main > section').css('height','auto');
    },

    afterResize: function(){
      console.log("resize");
      $('main > section').css('height','auto');
    },

    afterLoad: function(anchor, index){
      actualIndexSlide = index;
      // console.log("after load | anchor:"+anchor+" | index: "+index);
      if(actualIndexSlide == totalSlides) {
        // $.fn.fullpage.scrollOverflow(false);
        $.fn.fullpage.setAutoScrolling(false);
      }
    },

    afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
    console.log("hereeee");
    },

    onLeave: function(index, newIndex, direction){
      console.log("nuova "+newIndex);
      console.log(index+"-"+totalSlides);
      console.log(direction);
      if(direction == "up" && index == totalSlides) {
        // $.fn.fullpage.moveSectionUp();
        $.fn.fullpage.moveTo(newIndex);
        setTimeout(function() {
          $.fn.fullpage.setAutoScrolling(true);
        }, 1300);
      }
    }

  });

When i'm coming from last slide in up direction to second-to-last i have a flickering.
I have 2 problem: afterSlideLoad not firing, never! And a blank page in google chrome on MAC.

Any solutions?
Thanks and sorry for my english! :)

[alvarotrigo]

It's not easy to do what you are looking for.

I would recommend you to try it by using an scrollable DIV in the last section to simulate the normal scrolling behavior and then, by using your own touch and mousewheel handler events, detect when it reaches the top of the DIV and then slide up.

You would also need to remove the handlers as well at some point.

If you have troubles doing so, I could help you with it for some price. But it should be done with external code to the plugin.

[agaletta]

Thanks for reply.
It's a strange behaviour because it's seems ok right now only for flickering when i scroll-up from last to secont-to-last slide!
What about afterSlideLoad callback that is not firing, instead?

Thanks

[sidonaldson]

Try this instead:

start by adding this to css: body{padding-right:17px;}

add a html footer outside of #fullPage div

then JS:

$(document).ready(function() {
        var st = 0,
        fixThreshold = 20,
        numberOfItems = $('#fullpage .section').length;
        function reenableScroll(){
            $.fn.fullpage.setAutoScrolling(false);
            $(document.body).css('padding-right',0);
            st = $(window).scrollTop();
            $(window).on('scroll.fix', scrollHandler);
        }
        function scrollHandler(){
            if($(window).scrollTop() < st - fixThreshold){
                $.fn.fullpage.setAutoScrolling(true);
                $(document.body).css('padding-right',17);
                $(window).off('scroll.fix');
            };
        }
        $('#fullpage').fullpage({
            css3: true,
            afterLoad: function(anchorLink, index){
                console.log("afterLoad",anchorLink, index);
                if(index === numberOfItems)reenableScroll();
            }
        });
    });

seems to work ok for me but I'm not testing it other than chrome

[markadrake]

+1 for this functionality. I'm working on the implementation of a design where the brand wants to use fullpage.js to communicate it's message one "slide" at a time, but when you reach the last slide (which is full page of course) the footer of the site cannot be reached. I'd like to suggest this be a feature that's implemented into the core project.

[alvarotrigo]

the footer of the site cannot be reached. I'd like to suggest this be a feature that's implemented into the core project.

You can always use fp-auto-height for the footer as in this example.

[dangelion]

+1

[rahulmax]

👍 You're right, @alvarotrigo I was looking for this functionality for the footer and fp-auto-height achieves this. Better experience than switching to normal scroll just for the footer.