CODEWITHSUNDEEP
javascriptjquerypluginsjquery-pluginsfullpage.js
Elizabeth
Elizabeth

Reputation: 291

Fullpage.js Disable moveSectionUp when using continuous scroll or looping

Just starting to use fullPage.js and loving it so far.
Anyhow, when implementing continuous and looping effect and you're on the first section, it allows the end-user to scroll up and land on the last section as well ... which is a problem when trying to tell a story to the user. Therefore I am just trying to disable the up scrolling, but have no idea how to do so.

I did some research and came across the moveSectionUp and tried disabling it but had not figure out how to. Can anyone familiar with fullPage.js help me out here?

Note: I am only hoping to disable it for the first section and the rest is free to scroll back and forth.

Thanks in advance.

Upvotes: 0

Views: 2122

Answers (1)

Alvaro
Alvaro

Reputation: 41595

Use the fullpage.js function setAllowScrolling with the parameter up like so:

//disabling scrolling up
$.fn.fullpage.setAllowScrolling(false, 'up');

You can use it on the afterRender callback and the afterLoad to play with it, like this:

$('#fullpage').fullpage({
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    continuousVertical: true,
    afterRender: function () {
        //disabling scrolling up on page load if we are in the 1st section
        if($('.fp-section.active').index('.fp-section') === 0){
            $.fn.fullpage.setAllowScrolling(false, 'up');
        }
    },
    afterLoad: function (anchorLink, index) {
        if (index !== 1) {
            //activating the scrolling up for any other section
            $.fn.fullpage.setAllowScrolling(true, 'up');
        } else {
            //disabling the scrolling up when reaching 1st section
            $.fn.fullpage.setAllowScrolling(false, 'up');
        }
    }
});

Demo online

This way the visitors won't be able to scroll up on page load.

From the docs:

setAllowScrolling(boolean, [directions])

Adds or remove the possibility of scrolling through sections by using the mouse wheel/trackpad or touch gestures (which is active by default).

directions: (optional parameter) Admitted values: all, up, down, left, right or a combination of them separated by commas like down, right. It defines the direction for which the scrolling will be enabled or disabled.

Upvotes: 1

Related Questions