Fullpage.js und mobile Geräte: aktivieren Abschnitt / Folie Schalter, wenn die Inhalte überlauf aktiviert werden muss?

Nach dem Experimentieren mit einigen der Optionen, die ich noch nicht bekommen zufriedenstellendes Ergebnis:

Die verwendete Javascript-Bibliothek ist FullpageJS (http://alvarotrigo.com/fullPage/)

Fullpage.js initialisiert wird mit den folgenden Einstellungen:

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

Wichtig: Laut der Dokumentation scrollOverflow:true festgelegt ist (und auf true gesetzt werden muss), denn gerade auf mobilen Geräten die Inhalte einer Folie ist manchmal höher als die Bildschirmhöhe.

Aber es ist absolut notwendig, dass der Benutzer wechseln kann horizontal und vertikal zwischen den Folien mit dem finger (nicht navigation). Beabsichtigtes Verhalten ist wie folgt:

  1. Horizontale Schalter schieben, wenn sich der finger bewegt sich nach Links oder rechts

  2. Vertikale Schalter schieben: Weiter unten Folie nur, wenn die Folie wird gerollt um die Unterseite und die finger nach unten bewegt. Neben oben schieben: Nur wenn die Folie steht Sie an der Spitze und die finger nach oben bewegt.

Den (ehemaligen) dev-Projekt finden Sie hier: http://www.studiodankl.com/

InformationsquelleAutor Blackbam | 2015-10-22
  1. 3

    Dem problem eigentlich nichts zu tun hatte fullpage.js selbst - es stellte sich tatsächlich heraus, um eine ungültige plugin-Modifikation.

    Jedoch, wie einige andere erfahrene diesem Problem: Überprüfen Sie alle zusätzlichen HTML -, CSS-und vor allem JavaScript, wie dies wird wahrscheinlich Ursache ein problem.

    InformationsquelleAutor Blackbam
  2. 3

    Ich würde nicht empfehlen Sie zu verwenden scrollOverflow für mobile Geräte.

    Wenn Sie wollen eine echte responsive Website, die Sie sollten passen Sie den Inhalt an das Gerät und nicht von "hacky" scroll-bars passen sich die Inhalte.

    Können Sie Gebrauch machen von der Klasse fp-auto-height auf die Abschnitte, in denen Ihr Inhalt überlaufen auf mobilen Geräten. Sollten Sie nur hinzufügen, wenn Sie Ihre Website Ansprechend, das ist, unter eine bestimmte Breite oder Höhe begrenzt.

    Diese Weise diese Abschnitte werden in der Lage zu sein größer als das Gerät viewport.

    Verbindung mit der responsiveHeight oder responsiveWidtdh Optionen fullpage.js (diesen Satz autoScrolling:false) Sie werden in der Lage sein ein ziemlich responsive Website auf dem kleinen Bildschirm Geräte.

    Als ein Beispiel, können Sie werfen Sie einen Blick auf diese Website mit fullpage.js mit einem kleinen viewport. Es ist nicht die fp-auto-height option, aber das Ergebnis ist genau das gleiche.

    In diesem Fall der Ort, uns mit dieser:

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

    Ist ziemlich ähnlich zu dem, was fullpage.js verwendet für fp-auto-heigh:

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

    UPDATE

    fullpage.js stellt nun die Klasse fp-auto-height-responsive für diesen gleichen Zweck.
    Mehr in den docs.

    • Thx aber der Kunde möchte, dass die Folien, die aufschiebbaren auf mobilen Geräten.
    InformationsquelleAutor Alvaro
Schreibe einen Kommentar