Keith Clarks CSS Parallax Inertial / Momentum Scrollen auf Mobilgeräten

9

Also habe ich eine Seite mit Keith Clarks reiner CSS Parallax Idee erstellt. Und es sieht gut aus, aber ich bin neugierig, ob jemand herausgefunden hat, wie man das Trägheits / Impuls-Scrollen auf iOS zulässt .

Hier ist meine Website bisher.

Was ich bisher weiß:

Momentan funktioniert Inertial / Momentum Scrollen nicht, weil im Prinzip die ganze Seite in einem Container mit overflow-y:auto gehalten wird. Wenn Sie also auf der Seite scrollen, scrollen Sie innerhalb eines Containers. Auf iOS müssen Sie -webkit-overflow-scrolling: touch anwenden, um alles zu erlauben, das scrollt, das nicht das Ansichtsfenster ist, um Trägheits- / Impulsrollen zu haben.

Wenn Sie -webkit-overflow-scrolling: touch zu .parallax hinzufügen, bricht der gesamte Parallax-Effekt. Beispiel hier

Ich habe versucht, iscroll.js zur Seite hinzuzufügen, aber es unterbricht auch die Seite, indem ich die untergeordneten Elemente im Container .parallax dazu bringe, auf eine Weise zu scrollen, die nicht korrekt ist. Dadurch werden die Parallaxenebenen relativ zum Ansichtsfenster anstelle des Containers nach oben und unten verschoben.

Ein anderes Problem, das das verursacht, das nicht so groß ist, aber hier angesprochen werden könnte, ist, dass die Seite unter iOS nie auf Minimal-Ui geht, da dies nur passiert, wenn das Ansichtsfenster scrollt.

Ich habe Leute auf dem Blog-Post darüber sprechen sehen, also dachte ich mir, ich könnte die gleichen Probleme auf stackoverflow bringen und sehen, ob jemand gute Ideen hat.

Danke!

    
Organnoise 08.10.2014, 19:24
quelle

1 Antwort

0

Nicht das, was Sie hören möchten (vorausgesetzt, Sie haben ein paar gute Stunden damit verbracht, Keith Clarks Anleitung durchzulesen), aber iOS behandelt Scroll-Ereignisse anders als Desktop. Es ist möglich, dass Sie das anpassen können, was Sie bereits haben, aber wenn Sie das wirklich wollen, wechseln Sie wahrscheinlich besser zu einem js-Tool mit dokumentierter Unterstützung für iOS parallax + momentum. Stellar kann dies zum Beispiel tun - Ссылка

    
henry 05.03.2015 14:53
quelle

Tags und Links