Nach dem Experimentieren mit einigen der Optionen habe ich immer noch kein zufriedenstellendes Ergebnis erhalten:
Die verwendete Javascript-Bibliothek ist FullpageJS ( Ссылка )
Fullpage.js wird mit den folgenden Einstellungen initialisiert:
%Vor%Wichtig: Laut der Dokumentation ist scrollOverflow: true gesetzt (und muss auf true gesetzt sein), da der Inhalt einer Folie bei mobilen Geräten manchmal höher ist als die Bildschirmhöhe.
Es ist jedoch unbedingt erforderlich, dass Benutzer zwischen den Dias mit dem Finger horizontal und vertikal wechseln können (nicht Navigation). Beabsichtigtes Verhalten ist wie folgt:
Horizontaler Schalter schaltet, wenn sich der Finger nach links oder rechts bewegt
Vertikale Schalterfolie: Nächste untere Folie nur, wenn die Folie nach unten gescrollt wird und der Finger nach unten bewegt wird. Nächste obere Folie: Nur wenn die Folie nach oben gescrollt wird und der Finger nach oben bewegt wird.
Das Entwickler-Projekt kann hier gefunden werden: Ссылка
Das Problem hatte mit fullpage.js selbst nichts zu tun - es stellte sich heraus, dass es sich um eine ungültige Plugin-Änderung handelte .
Wie einige andere jedoch dieses Problem hatten: Überprüfen Sie zusätzlichen HTML, CSS und insbesondere JavaScript , da dies am ehesten zu einem Problem führen kann.
Ich würde dir nicht empfehlen, scrollOverflow für mobile Geräte zu verwenden.
Wenn Sie eine reaktionsschnelle Website wünschen, sollten Sie den Inhalt an das Gerät anpassen und nicht "hacky" Bildlaufleisten verwenden, um den Inhalt anzupassen.
Sie können die Klasse fp-auto-height für die Abschnitte verwenden, in denen Ihr Inhalt enthalten ist wird auf mobilen Geräten überlaufen. Sie sollten es nur hinzufügen, wenn Ihre Website reagiert, das heißt, unter bestimmten Breite oder Höhe Grenzen.
Auf diese Weise können diese Abschnitte größer als das Gerätefenster sein.
Wenn Sie dies mit den Optionen responsiveHeight oder responsiveWidtdh von fullpage.js kombinieren (das heißt autoScrolling:false ), können Sie eine ziemlich reaktionsschnelle Seite auf kleinen Bildschirmen haben.
Als Beispiel können Sie diese Seite mit fullpage.js in einem kleinen Ansichtsfenster betrachten. Es verwendet nicht die Option fp-auto-height , aber das Ergebnis ist genau das gleiche.
In diesem Fall verwenden wir diese Seite:
%Vor% Was ziemlich ähnlich zu dem ist, was von fullpage.js für fp-auto-heigh verwendet wird:
fullpage.js stellt jetzt die Klasse fp-auto-height-responsive für diesen Zweck bereit.
Weitere in den Dokumenten .
Tags und Links jquery touch mobile fullpage.js responsiveness