CODEWITHSUNDEEP
fullpage.js
BenMorel
BenMorel

Reputation: 36642

Prevent scrolling from section, but allow anchor navigation in Fullpage.js

My first fullpage.js section is scrollable (scrollOverflow: true), and I don't want a jump to the second section when reaching the bottom of the first section.

As such, I set up the following callback:

onLeave: function(origin, destination, direction) {
    if (origin.index === 0) {
        return false;
    }
}

The problem is, this also prevents regular anchor links (such as <a href="#section2">) to work: navigation is also blocked by the callback.

This is annoying as my first page has links to the other sections.

Is there a way to prevent onLeave only when it is due to a scroll, but still allow anchor navigation?

The callback parameters do not seem to have a way to distinguish a scroll from an anchor click.

Upvotes: 0

Views: 587

Answers (1)

Alvaro
Alvaro

Reputation: 41605

Is there a way to prevent onLeave only when it is due to a scroll, but still allow anchor navigation?

Sure! You can use the method fullpage_api.setAllowScrolling(false) when reaching that section with scrollOverflow.

Then set it back to true in any other section:

new fullpage('#fullpage', {
    sectionsColor: ['yellow', 'green', 'purple', 'orange'],
    navigation: true,

    onLeave: function(origin, destination, direction) {
        //assuming section 2 is the one with scrollOverflow
        fullpage_api.setAllowScrolling(destination.index !== 1);
    }
});

Reproduction online: https://jsfiddle.net/alvarotrigo/zx05cfr9/1/

Upvotes: 0

Related Questions