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

Après avoir expérimenté avec quelques options je n'ai toujours pas obtenir de résultat satisfaisant:

Utilisés pour la bibliothèque Javascript 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:vrai, c'est (et doit être défini à true), parce que, surtout sur des appareils mobiles, le contenu d'une diapositive est parfois plus élevé que la hauteur de l'écran.

Cependant, il est absolument nécessaire que les utilisateurs peuvent basculer horizontalement et verticalement entre les diapositives avec le doigt (pas de navigation). Destiné comportement est comme suit:

  1. Horizontale commutateur commutateur lame si le doigt se déplace à gauche ou à droite
  2. Verticale interrupteur à glissière: Côté bas de la diapositive que si diapositive vous pouvez faire défiler vers le bas et le doigt se déplace vers le bas. Suivant en haut de la diapositive: Seulement si la diapositive est un défilement vers le haut et le doigt se déplace vers le haut.

Le dev du projet peuvent être trouvés ici: http://www.studiodankl.com/studiodankl/

OriginalL'auteur Blackbam | 2015-10-22

  1. 3

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

    Si vous voulez un vrai site responsive vous devez adapter le contenu de l'appareil et pas fait usage de "hacky" barres de défilement pour ajuster le contenu.

    Vous pouvez faire usage de la classe fp-auto-height sur les sections de votre contenu sera débordant sur les appareils mobiles. Vous devez seulement ajouter quand votre site est responsive, c'est, sous certaines largeur ou de la hauteur des limites.

    De cette façon, ces sections seront en mesure d'être plus grand que le dispositif de la fenêtre d'affichage.

    Combiner avec le responsiveHeight ou responsiveWidtdh options de fullpage.js (qui autoScrolling:false), vous serez en mesure d'avoir un joli site responsive sur petit écran des appareils.

    Comme un exemple, vous pouvez prendre un coup d'oeil à ce site à l'aide de fullpage.js à l'aide d'une petite fenêtre d'affichage. Il n'est pas à l'aide de la fp-auto-height option, mais le résultat est exactement le même.

    Dans ce cas, le site nous en utilisant ce:

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

    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;
}

    Mise à JOUR

    fullpage.js fournit maintenant la classe fp-auto-height-responsive pour ce même but.
    Plus dans les docs.

    Thx toutefois, le client veut les diapositives pour être slideable sur les appareils mobiles.

    OriginalL'auteur Alvaro

  2. 2

    Le problème en fait n'avait rien à voir avec fullpage.js lui - même-il s'est en fait avéré être un invalide plugin modification.

    Cependant que quelques autres, rencontré ce problème: Vérifier supplémentaires HTML, CSS et surtout JavaScript que cela est plus susceptible de causer un problème.

    OriginalL'auteur Blackbam