Désactiver le balayage tactile sur fullpage.js

Question

J'utilise le plugin fullpage.js pour un site marketing d'une seule page.

J'utilise des liens de navigation pour accéder aux scènes (toutes horizontales) autour du site. Je souhaite donc désactiver la fonction toucher/glisser (entre les scènes) car elle interfère avec d'autres éléments tactiles.

J'ai parcouru toute la documentation mais je n'arrive pas à trouver comment y parvenir.

Toute aide est la bienvenue.Merci, Jack.

Answer 1

Utilisez simplement l'option autoScrolling:false lors de l'initialisation du plugin.De cette façon, la molette de la souris ne glissera pas et les événements tactiles non plus.

Si vous souhaitez maintenir le défilement de la molette de la souris (pour les ordinateurs) mais désactiver les événements tactiles (appareils tactiles), alors je vous recommande d'initialiser le plugin d'une manière différente pour les appareils tactiles.Pour ce faire, je vous recommande de faire quelque chose comme ça.

Mise à jour 2016 :

Vous pouvez utiliser les options responsiveWidth ou responsiveHeight ainsi que la classe fp-auto-height-responsive.

Les options désactiveront la fonction de défilement automatique pour les appareils mobiles sous les dimensions spécifiées.Exemples disponibles dans le examples dossier de fullPage.js ou en ligne.

Vous pouvez aussi utiliser responsiveSlides et forcer la transformation des slides horizontales en sections verticales sur responsive.Cela peut être fait à travers le Extension de diapositives réactives.

Mise à jour septembre 2014 :

---

Une méthode nommée $.fn.fullpage.setAllowScrolling peut également être utilisé dans le même but.Cela désactivera à la fois le défilement tactile et le défilement de la souris.

Mise à jour juin 2014 :

---

autoScrolling:false désactive uniquement le défilement vertical.Si vous souhaitez également désactiver l'horizontale, il n'y a aucun moyen de le faire pour le moment.Il faudrait modifier un peu le plugin.

À l'intérieur de fullpage.js remplace ceci :

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

Pour ça:

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

Et puis, lorsque vous initialisez le plugin, appelez cette fonction publique dans le afterRender rappel comme ceci :

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

N'appelez pas fullpage deux fois.Ajoutez simplement le afterRender fonction à l’intérieur de votre initialisation.

Answer 2

La fonction Setallwscrolling accepte également un deuxième argument pour les instructions afin que ce qui suit puisse être utilisé pour désactiver le défilement / la glissière gauche / droite:

$. fn.fullpage.setallowscrolling (faux, "gauche, droite");

Answer 3

Depuis juin 2017, aucune des méthodes précédentes ne fonctionnait pour moi.Le moyen le plus simple que j’ai trouvé pour désactiver efficacement le toucher est le suivant.

Dans jquery.fullPage.js vous trouverez la fonction 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();
    }
}

Lorsque la page complète est initialisée, elle appelle automatiquement setAllowScrolling(true), déclenchant le else if(value) état ci-dessus.Commentez simplement l'appel à addTouchHandler() pour le désactiver complètement, ou ajouter une sorte de condition pour qu'il soit appelé, par exemple

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

Avec cette méthode, les flèches gauche et droite fonctionnent toujours lorsque vous appuyez dessus, de sorte que les diapositives horizontales peuvent toujours être parcourues.Il convient de noter qu'en utilisant $.fn.fullpage.setAllowScrolling(false, 'left, right'); désactivera également les flèches.