web-dev-qa-db-fra.com

Fullpage.js et les appareils mobiles: Comment activer le commutateur de section/diapositive si le débordement de contenu doit être activé?

Après avoir essayé certaines des options, je n'ai toujours pas obtenu de résultat satisfaisant:

La bibliothèque Javascript utilisée est FullpageJS ( http://alvarotrigo.com/fullPage/ ).

Fullpage.js est initialisé avec les paramètres suivants:

$('#fullpage').fullpage({
   sectionsColor: colors,
   anchors: anchors,
   scrollOverflow: true,
   afterSlideLoad: function() {
      startTheSliders();
   },
   onLeave: function(index) {
        setTimeout(function() {
            $.fn.fullpage.scrollSlider(index,0);
        },1000);
   }
});

Important: Selon la documentation, scrollOverflow: true est défini (et doit être défini sur true), car le contenu d'une diapositive est parfois parfois supérieur à la hauteur de l'écran, notamment sur les appareils mobiles.

Cependant, il est absolument nécessaire que les utilisateurs puissent basculer horizontalement et verticalement entre les diapositives avec le doigt (pas de navigation). Le comportement souhaité est le suivant:

  1. Interrupteur horizontal coulissant si le doigt bouge à gauche ou à droite

  2. Diapositive de commutation verticale: diapositive inférieure suivante uniquement si la diapositive est déplacée vers le bas et que le doigt est abaissé. Diapositive supérieure suivante: Uniquement si vous faites défiler la diapositive vers le haut et que votre doigt se déplace vers le haut.

Le projet dev peut être trouvé ici: http://www.studiodankl.com/studiodankl/

jquerymobiletouchfullpage.jsresponsiveness
8
Blackbam

Le problème n'avait en réalité rien à voir avec fullpage.js lui-même - il s'est en fait avéré être une modification de plug-in non valide .

Toutefois, comme d’autres personnes ont connu ce problème: Vérifiez tout code HTML, CSS et en particulier JavaScript car cela risque de poser problème.

2
Blackbam

Je ne vous recommanderais pas d'utiliser scrollOverflow pour les appareils mobiles.

Si vous voulez un vrai site réactif, vous devez adapter le contenu à l'appareil et ne pas utiliser les barres de défilement "hacky" pour l'adapter au contenu.

Vous pouvez utiliser la classe fp-auto-height sur les sections dans lesquelles votre contenu débordera sur les appareils mobiles. Vous ne devez l'ajouter que lorsque votre site est réactif, c'est-à-dire dans certaines limites de largeur ou de hauteur.

De cette façon, ces sections pourront être plus grandes que la fenêtre d'affichage de l'appareil. 

En combinant cela avec les options responsiveHeight ou responsiveWidtdh de fullpage.js (qui définit autoScrolling:false), vous pourrez créer un site très réactif sur des appareils de petit écran. 

Par exemple, vous pouvez regarder ce site en utilisant fullpage.js en utilisant une petite fenêtre. Il n'utilise pas l'option fp-auto-height mais le résultat est exactement le même. 

Dans ce cas, le site nous utilise ceci:

/*screen resolutions smaller than 950px height*/
@media (max-width: 950px){
    #section3.fp-section,
    #section3 .fp-tableCell{
        height: auto !important;
        min-height: 100%;
    }
}

Ce qui est assez similaire à ce que fullpage.js utilise pour fp-auto-heigh:

.fp-auto-height.fp-section,
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell{
    height: auto !important;
}

METTRE À JOUR

fullpage.js fournit maintenant la classe fp-auto-height-responsive dans le même but. More dans la documentation .

3
Alvaro