Deshabilitar el deslizamiento táctil en fullpage.js

Question

Estoy usando el complemento fullpage.js para un sitio de marketing de una sola página.

Estoy usando enlaces de navegación para saltar a escenas (todas horizontales) alrededor del sitio, por lo que quiero desactivar la función tocar/deslizar (entre escenas), ya que interfiere con otros elementos táctiles.

He revisado toda la documentación pero no puedo encontrar cómo lograrlo.

Cualquier ayuda es bienvenida.Gracias, Jack.

Answer 1

Solo usa la opción autoScrolling:false al inicializar el complemento.De esta manera, la rueda del mouse no se deslizará y tampoco lo harán los eventos táctiles.

Si desea mantener la rueda del mouse desplazándose (para computadoras) pero deshabilitar los eventos táctiles (dispositivos táctiles), le recomendaría que inicialice el complemento de una manera diferente para dispositivos táctiles.Para ello te recomiendo que hagas algo como esto.

Actualización 2016:

Puedes usar las opciones responsiveWidth o responsiveHeight así como la clase fp-auto-height-responsive.

Las opciones deshabilitarán la función de desplazamiento automático para dispositivos móviles bajo las dimensiones especificadas.Ejemplos disponibles en el examples carpeta de fullPage.js o en línea.

También puedes usar responsiveSlides y forzar la transformación de diapositivas horizontales en secciones verticales en responsivo.Esto se puede hacer a través del Extensión de Presentaciones responsivas.

Actualización de septiembre de 2014:

---

Un método llamado $.fn.fullpage.setAllowScrolling También se puede utilizar con este mismo fin.Deshabilitará tanto el desplazamiento táctil como el desplazamiento del mouse.

Actualización de junio de 2014:

---

autoScrolling:false sólo desactiva el desplazamiento vertical.Si también quieres desactivar el horizontal, no hay forma de hacerlo ahora.Necesitarías modificar un poco el complemento.

Dentro de fullpage.js se reemplaza esto:

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

Para esto:

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

Y luego, cuando inicialice el complemento, llame a esa función pública en el afterRender devolución de llamada así:

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

No llames a página completa dos veces.Solo agrega el afterRender función dentro de su inicialización.

Answer 2

La función SetAllowsCrolling también acepta un segundo argumento para las instrucciones de modo que se puede usar lo siguiente para deshabilitar el desplazamiento / deslizamiento izquierdo / derecho:

$. fn.fullpage.setallawscrolling (Falso, 'Izquierda, Derecha');

Answer 3

En junio de 2017, ninguno de los métodos anteriores me funcionó.La forma más sencilla que encontré para desactivar eficazmente el tacto es la siguiente.

En jquery.fullPage.js encontrarás la función 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();
    }
}

Cuando se inicializa la página completa, llama automáticamente setAllowScrolling(true), desencadenando el else if(value) condición anterior.Simplemente comenta la llamada a addTouchHandler() para deshabilitarlo por completo, o agregar algún tipo de condición para que se llame, por ejemplo

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

Con este método, las flechas izquierda y derecha aún funcionan cuando se tocan, por lo que aún se puede navegar por las diapositivas horizontales.Cabe señalar que el uso $.fn.fullpage.setAllowScrolling(false, 'left, right'); También desactivará las flechas.