Fullpage.js: 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]

:+1: 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.

[ctf0]

am having the same issue, with the latest build, i set fitToSection: false, but no luck :(

[alvarotrigo]

@ctf0 if you try the latest dev version 2.7.8 (Beta), you can use normal scrolling in sections by using the class fp-normal-scroll in the section you expect to have normal scrolling. Then use the option hybrid:true in fullpage.js initialisation.

This is a feature under testing and therefore it is not perfect and will probably have bugs.

[ctf0]

@alvarotrigo right now i found a way around, not perfect but for now it works,
i set

fitToSection: false,
autoScrolling: false,

and nothing add to the footer, ofcourse the autoscroll doesnt work but maybe that would help u with ur debug, thanx again

[codercooooder]

Hey Alvaro,

I love that you are adding this feature - but I can't seem to get it to work. Perhaps, this is because it is in beta, but I am wondering if I have failed to apply the correct settings.

I would like fullpage.js to use normal autoScrolling when transitioning from the first section (Section0), to the second section (Section1) , and from that point on, on all subsequent sections (e.g. Section2, Section3, Section4) for autoScrolling to be disabled: I don't want any jumping behavior after Section1 (the second section) loads.

In order to accomplish this, you indicated that I set hybrid:truein fullpage.js initialisation, that is clear, but I have some other questions.

1. What should the autoScrolling setting be set to , do I set it to 'false' or just leave it be, on its default setting 'true'?
2. So, is it correct that all sections lacking the class "fp-normal-scroll" will not autoscroll if hybrid is set to 'true'?

Thanks!

[alvarotrigo]

It is a concept under development, so it is not perfect. Right now it won't auto scroll back to the 1st section:

Demo online

$('#fullpage').fullpage({
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    hybrid:true,
    fitToSection: false
});

[codercooooder]

Alvaro, sorry I don't understand. I thought this feature turned off autoScrolling/page jumping for sections lacking the class. I don't see any difference between the old default and the demo you supplied. I apologize if I am being dense.

[alvarotrigo]

In my demo you have autoscrolling from 1st section to 2nd. Then normal scroll.

[codercooooder]

I tested your demo in chrome and firefox, as far as I can tell it autoScrolls in all sections.

[alvarotrigo]

@codercooooder tested on Mac and Windows, Chrome and Firefox. It autoScrolls from 1st to 2nd and then uses normal scroll.

[codercooooder]

when you say autoscrolling - you mean section jumping, and by normal scroll - you mean when I press the down arrow key it should not jump sections??? Because when I press the down arrow key it is scrolling down to the next section. If it press it four times after loading the jsfiddle, I reach the bottom of the page - each key press of the down arrow key makes the section jump. Other people in a forum who I had test this produced the same thing. Are you testing on a mobile device? I'm on a laptop.

UPDATE: I think I figured something out! I did just notice that if i used my gestures on my laptop trackpad, I get autoscrolling only for the first section, and then normal scrolling...I think maybe this isn't programmed for down arrow behavior yet - only for gestures

[alvarotrigo]

Nothing to do with the keyboard navigation. Read the docs regarding autoScrolling for more info.

[codercooooder]

autoScrolling and Keyboard navigation are not the same thing?

[codercooooder]

Can you turn off keyboardScrolling for certain sections only?

[codercooooder]

From reading the documentation, setKeyboardScrolling turns off keyboard functionality completely. I want the keyboard arrow to work but NOt in an autoscroll/section-jumping way, but instead I want the keyboard to work in a slow/traditional/normal/incremental way, but only for the last sections. I do want the keyboard arrow to jump when moving from the first section to the second. After that first jump, however, I'd like the arrow key to be incremental - completely analogous to your hybrid gesture behavior. If this functionality doesn't exist already, it would be amazing if you had a something like a "fp-normal-keyboard-scrolling" class that we could add for specific sections so we could control when the down arrow causes section jumping and when it is slow/incremental.

[alvarotrigo]

Just use a callback for it and set it off for any other section rather than the 1st one by using setKeyboardScrolling.

[codercooooder]

I don't understand this, I just posted my question on stackExchange. http://stackoverflow.com/questions/36610071/producing-autoscrolling-with-keyboard-but-only-only-for-some-sections-when-u

[codercooooder]

Alvaro, the callback almost does the trick- how do I adapt this so that the keyboard skipping is turned on *_only when I scroll from section0 to section1 and then never turned back on? *_ section jumping from second section (section1) back to the first section (section0) creates problems on my page.

[codercooooder]

I posted my follow-up question on StackExchange, as well: http://stackoverflow.com/questions/36649572/fullpage-js-autoscrolling-and-keyboard-jump-only-when-leaving-not-returning

[alvarotrigo]

@codercooooder please stop adding post in this topic. Your question is totally out of topic and it is very specific issue with your use case.

[codercooooder]

Should I open a new thread?

[alvarotrigo]

@codercooooder not really. Just use stackoverflow.

[fschneid]

The hybrid feature works great. Except if you scroll in your demo from slide1 to slide2 auto-scroll is enabled. But if you scroll up from slide2 to slide1 auto-scroll is disabled. Is there any way to enable auto-scroll if you scroll from a section with normal-scroll to a section with auto-scroll? Thanks.

[alvarotrigo]

Except if you scroll in your demo from slide1 to slide2 auto-scroll is enabled. But if you scroll up from slide2 to slide1 auto-scroll is disabled.

As I said:

This is a feature under testing and therefore it is not perfect and will probably have bugs.

[fschneid]

Ok, I managed to create a workaround by adding a scroll animation inside the onLeave handler. Little bit hacky but it works.

[NikolaDonchev]

Hi @alvarotrigo,

Firstly, great job with all of the functionality that you have added into this, I love using it!
Today I went into one problem, I am using the fp-normal-scroll class for few sections but so far I can't make it work on mobile and unfortunately I need it to be working there as well, right now it seems to be ignoring the class entirely, I checked the unminified version but I am not really sure why this is happening. Any advices?

Thanks!

[alvarotrigo]

I am using the fp-normal-scroll class

That feature was never documented and still under development. Support for it is not provided I'm afraid.

[s10wen]

I think I have a similar issue. I have multiple slides, then I'd like 'normal' scroll for a large footer (that allows all the content to be shown).

The following demo works well for a small footer:
https://alvarotrigo.com/fullPage/examples/autoHeight.html#3rdPage

I've created a demo for the issue I'm having with the large footer:
https://codepen.io/s10wen/pen/eVoMga

Thanks in advance for any help :)

[alvarotrigo]

@s10wen use scrollOverflow:true. Then place all your "normal" content in your last section. That will emulate the behaviour you want. hybrid and fp-normal-scroll are not supported features.

[s10wen]

@alvarotrigo jackpot! Is there a way to manipulate the .fp-nav as so:

.section .header-slide = no nav
.section .slide-one = nav starts on 1 (and shows 3)
.section .slide-two = nav 2 (and shows 3)
.section .slide-one = nav ends on 3 (and shows 3)
.section .footer-slide = no nav

p.s. I found https://github.com/alvarotrigo/fullPage.js/issues/1110 but it looks like the demo is a 404 http://jsfiddle.net/97tbk/512/

[alvarotrigo]

Make use of fullPage.js state classes or callbacks for that.
Check this video tutorial I did regarding css3 conditions based on fullpage.js state classes.

[taraskhvyl]

The hybrid feature works great. Except if you scroll in your demo from slide1 to slide2 auto-scroll is enabled. But if you scroll up from slide2 to slide1 auto-scroll is disabled. Is there any way to enable auto-scroll if you scroll from a section with normal-scroll to a section with auto-scroll? Thanks.

hi. this is actual question. any updates on it? how can i make auto scroll from 2-nd section?

thank you

[alvarotrigo]

any updates on it?

If there were any, you'd see my comment on it.
But you can't see any right? Then there's none :)

[taraskhvyl]

any updates on it?

If there were any, you'd see my comment on it.
But you can't see any right? Then there's none :)

I can share my fast solution for it. Maybe it will help somebody :)

`
let allowScrollTop = false;

$('#fullpage').fullpage({
    hybrid:true,
    fitToSection: true,

    afterLoad : function( anchorLink, index) {

        if(index === 2) {
            allowScrollTop = true;
        }
    }
});

$(window).on('scroll', function() {
    let scrollTop = $(window).scrollTop();

    if((firstScreenHeight > scrollTop) && (allowScrollTop === true)) {
        $.fn.fullpage.moveSectionUp();
        allowScrollTop = false;
    }
});

`

[HunselM]

@taraskhvyl Do you have an example to show?