Fullpage.js: Scroll normally after last fullPage section?

[PivotMatt]

Hello -- great plugin ... we use it a lot! We are using fullPage for a vertically-scrolling gallery at the top of a website but would like the rest of the site content (below the gallery) to scroll normally once the last section of the fullPage gallery is viewed. Is this possible?

[alvarotrigo]

The only way to achieve that is placing your "whole website" (normal scroll part of the site) in the last section of fullPage.js and then using scrollOverflow:true to create a scroll bar in that last section as in this example.

That way you would be kind of replicating the effect you want.

[PivotMatt]

Thank you for your quick response! We did that earlier but it was causing some other unrelated issues so thought there might be another solution. Thanks again!

[alvarotrigo]

Unfortunately not.
This is at the end of the day a fullscreen slider :)

[knoxjr]

@PivotMatt I was wondering about it and did this solution:
This should work as you expect. Enjoy

[PivotMatt]

@knoxjr Thanks so much for working out a solution. We ended up with a solution similar to what @alvarotrigo suggested re: placing the rest of the website in the last slide. After all of the trouble the client decided to move in a different direction with the design. Good times.

Thanks again!

[tomferrall]

@knoxjr hi, your solution is potentially just what I need. I was hoping you'd be able to elaborate a bit and share the rest of the markup?

This is doesn't seem to be having any affect at the moment but I'm wondering if my HTML might be wrong.

Thanks

[alvarotrigo]

@tomByrer what don't you understand from my reply?

[tomferrall]

@alvarotrigo was that meant for me? If so, I totally understand the scrollOverflow solution, I was just interested to see how another solution might work.

[alvarotrigo]

@tomferrall the other solution won't be 100% bulletproof. There's a reason why the feature doesn't exist in fullPage.js :)
It won't look smooth with kinetic scrolling devices and the change from autoScrolling to free scrolling won't be ideal.

[tomferrall]

@alvarotrigo Yeah that's a really good point. Shame because https://alvarotrigo.com/fullPage/extensions/scroll-horizontally.html is exactly what I want but with a 'normal' site below it.

I just worry using scrollOverflow won't work as the rest of the page will include a lot of scroll activated animations. Also would be handy using your built in carousel video playing as well!

Maybe I'll just change the designs!

[knoxjr]

I had the same question in the past. And I think, I made the solution that @tomferrall is looking for.
here the example

[alvarotrigo]

@knoxjr uh! That doesn't look bad at all! Thanks for sharing it man!
I guess there's of course less friction implementing it when using scrollBar:true as you are doing!

I'll definitely take a second look at this feature!

[knoxjr]

no problem @alvarotrigo

[tomferrall]

Thanks @knoxjr! really helpful. @alvarotrigo if you could add that feature in the next couple of days that would be great! Haha ;)

[alvarotrigo]

@tomByrer indeed it would! Hahah, but I won't be able to, I have many other things in the todo list for this month :)

[WilliamSf]

The idea of ​​@knoxjr was very good, I tried to implement it on my site and it did not work because of the fullpage version @knoxjr used is 2.8.7 and I'm using the newest one, could it help?

[WilliamSf]

I even did the way you reported on the link: https://codepen.io/williamsf/pen/pGEQNP?editors=1010 , but it did not go well

[honeyamin]

I even did the way you reported on the link: https://codepen.io/williamsf/pen/pGEQNP?editors=1010 , but it did not go well

if you use 2.6V it will work. but i think that you should include iscroll yourself (if you use it)

[jaydeepchauhan7]

var apiFullPage;  
$(document).ready(function() {

  apiFullPage = new fullpage( element, {
       scrollBar: true,
       onLeave: function(origin, destination, direction) {
         if( destination.isLast ) {
           apiFullPage.setAutoScrolling(false);
           apiFullPage.setFitToSection(false);
         } else {
           apiFullPage.setAutoScrolling(true);
           apiFullPage.setFitToSection(true);
         }
       }
   });

});

It's working well for me

[alvarotrigo]

Here's another example of another page implementing it:
https://www.floid.ch/

[jarodpeachey]

@knoxjr Do you have the source code that I could take a look at for your solution?