Disabilita il touch swipe su fullpage.js

Question

Sto usando il plugin fullpage.js per un sito di marketing di una singola pagina.

Sto usando i collegamenti di navigazione per passare alle scene (tutti orizzontali) intorno al sito, quindi voglio disabilitare la funzione Touch / Swipe (tra Scenes) in quanto interferisce con altri elementi touch.

Sono stato tutta la documentazione, ma non riesco a scoprire come ottenere questo.

Qualsiasi aiuto è il benvenuto.Grazie, Jack.

Answer 1

Basta utilizzare l'opzione autoScrolling:false durante l'inizializzazione del plugin. In questo modo la ruota del mouse non scorrerà e né gli eventi touch lo farà.

Se si desidera mantenere lo scorrimento della ruota del mouse (per i computer) ma disabilitare gli eventi touch (Touch Device), quindi ti consiglierei di inizializzare il plug-in in un modo diverso per i dispositivi touch. Per farlo, ti consiglio di fare qualcosa del genere .

Aggiornamento 2016:

È possibile utilizzare le opzioni responsiveWidth o responsiveHeight e la classe fp-auto-height-responsive .

Le opzioni disabilitano la funzione AutosCrolling per i dispositivi mobili nelle dimensioni specificate. Esempi disponibili nella cartella examples di FullPage.js o online .

È inoltre possibile utilizzare responsiveSlides e forzare la trasformazione di diapositive orizzontali in sezioni verticali su reattivo. Questo può essere fatto attraverso il Estensione delle diapositive reattiva .

Aggiornamento sep-2014:

---

Un metodo denominato $.fn.fullpage.setAllowScrolling può essere utilizzato anche con lo stesso scopo. Disabiliterà sia lo scorrimento touch e lo scorrimento del mouse.

Aggiorna giugno 2014:

---

autoScrolling:false disabilita solo lo scorrimento verticale. Se vuoi anche disabilitare l'orizzontale, non c'è modo di farlo adesso. Dovresti modificare un po 'il plugin.

all'interno fullpage.js sostituisce questo:

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

.

Per questo:

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

.

E poi, quando si inizializza il plugin, chiamare quella funzione pubblica nella callback afterRender come:

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

.

Non chiamare il fullpage due volte. Basta aggiungere la funzione afterRender all'interno della tua inizializzazione.

Answer 2

La funzione SetLowsCrolling accetta anche un secondo argomento per le direzioni in modo che sia possibile utilizzare il seguente per disabilitare lo scorrimento / scansione a sinistra / destra:

$. fn.fullpage.setsallewsowscrolling (false, 'sinistra, destra');

Answer 3

A partire da giugno 2017, nessuno dei metodi precedenti ha funzionato per me.Il modo più semplice che ho trovato per disabilitare efficacemente il tocco è il seguente.

in jquery.fullpage.js Troverai la funzione 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();
    }
}

.

Quando il fullpage viene inizializzato chiama automaticamente setAllowScrolling(true), attivando la condizione else if(value) sopra.Basta commentare la chiamata a addTouchHandler() per disabilitarlo completamente o aggiungere una sorta di condizione per essere chiamato, ad es.

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

.

Con questo metodo le frecce sinistra e destra funzionano ancora quando vengono sfruttate, tali diapositive orizzontali possono ancora essere navigate.Va notato che l'utilizzo di $.fn.fullpage.setAllowScrolling(false, 'left, right'); disabiliterà anche le frecce.