CODEWITHSUNDEEP
fullpage.js
czLukasss
czLukasss

Reputation: 750

Fullpage.js - stop mouse scrolling on last but one section

I have 5 fullpage sections and scrolling set by whole sections. Everything works fine.

But i need, if visitor is on 4th section and scrolls down, that web not scroll down to last section. I want access to this last section only by click on button in 4th section. This button is done and functional, but i dont now, how to disable automatic scrolling to last section.

Thanks for any idea!

Upvotes: 1

Views: 1356

Answers (1)

Alvaro
Alvaro

Reputation: 41595

You can disable the scrolling in the last section by using the method 

fullpage_api.setAllowScrolling(false, 'down');

More about it on the docs: https://github.com/alvarotrigo/fullPage.js#setallowscrollingboolean-directions

So, you can use it on a callback such as afterLoad:

afterLoad: function(origin, destination, direction){
    var numSections = document.querySelectorAll('.fp-section').length;

    // Is the afterload firing for the last section?
    if(destination.index === numSections -1){
       fullpage_api.setAllowScrolling(false, 'down');
    }

    // for all other sections, we enable scrolling again in case it was off
    else{
       fullpage_api.setAllowScrolling(true, 'down');
    }
}

Then on the button you can use the method moveTo:

//moving to section 4
fullpage_api.moveTo(4)

More about the method on the docs: https://github.com/alvarotrigo/fullPage.js#movetosection-slide

Upvotes: 1

Related Questions