Disable touch swipe on fullpage.js

Question

I'm using the fullpage.js plugin for a single page marketing site.

I'm using navigation links to jump to scenes (all horizontal) around the site so I want to disable to the touch/swipe (between scenes) feature as it interferes with other touch elements.

I've been though all the documentation but I can't find out how to achieve this.

Any help is welcome. Thanks, Jack.

Answer 1

Just use the option autoScrolling:false when initializing the plugin. This way the mouse wheel won't swipe and neither the touch events will.

If you want to keep the mouse wheel scrolling (for computers) but disable the touch events (touch devices), then I would recommend you to initialize the plugin in a different way for touch devices. In order to do so, I recommend you to do something like this.

Update 2016:

You can use the options responsiveWidth or responsiveHeight as well as the class fp-auto-height-responsive.

The options will disable the autoScrolling feature for mobile devices under the specified dimensions. Examples available in the examples folder of fullPage.js or online.

You can also use responsiveSlides and force the transformation of horizontal slides into vertical sections on responsive. This can be done through the Responsive Slides extension.

Update Sep-2014:

---

A method named $.fn.fullpage.setAllowScrolling can also be used with this same purpose. It will disable both the touch scrolling and the mouse scrolling.

Update Jun-2014:

---

autoScrolling:false only disables the vertical scrolling. If you want also to disable the horizontal one, there's no way to do it right now. You would need to modify a bit the plugin.

Inside fullpage.js replaces this:

function removeTouchHandler() {
    if (isTablet) {
        $(document).off('touchstart MSPointerDown');
        $(document).off('touchmove MSPointerMove');
    }
}

For this:

$.fn.fullpage.removeTouchHandler = function (){ 
    if (isTablet) {
        $(document).off('touchstart MSPointerDown');
        $(document).off('touchmove MSPointerMove');
    }
};

And then, when you initialize the plugin, call that public function in the afterRender callback like so:

$(document).ready(function() {
    $('#fullpage').fullpage({
        afterRender: function(){
            $.fn.fullpage.removeTouchHandler();
        }
    });
});

Don't call fullpage twice. Just add the afterRender function inside your initialization.

Answer 2

The setAllowScrolling function also accepts a second argument for directions so the following can be used to disable left/right scrolling/swiping:

$.fn.fullpage.setAllowScrolling(false, 'left, right');

Answer 3

As of June 2017, none of the previous methods worked for me. The simplest way I found to effectively disable touch is as follows.

In jquery.fullPage.js you will find the function setAllowScrolling

function setAllowScrolling(value, directions){
    if(typeof directions !== 'undefined'){
        directions = directions.replace(/ /g,'').split(',');

        $.each(directions, function (index, direction){
            setIsScrollAllowed(value, direction, 'm');
        });
    }
    else if(value){
        setMouseWheelScrolling(true);
        addTouchHandler();
    }else{
        setMouseWheelScrolling(false);
        removeTouchHandler();
    }
}

When fullpage is initialized it automatically calls setAllowScrolling(true), triggering the else if(value) condition above. Simply comment out the call to addTouchHandler() to fully disable it, or add some sort of condition for it to be called, eg

var winw = $(window).width();
if (winw > 480){
    addTouchHandler();
} 

With this method the left and right arrows still work when tapped, so horizontal slides can still be navigated. It should be noted that using $.fn.fullpage.setAllowScrolling(false, 'left, right'); will also disable the arrows.