it-swarm.com.de

Scroll-Bounce für das body-Element verhindern, aber für untergeordnete Elemente in iOS beibehalten

Ich habe in letzter Zeit an einer mobilen Webapp gearbeitet. Ich optimiere Mobile-First und konzentriere mich derzeit speziell auf iOS für das iPhone. Ich möchte nicht das genaue Aussehen einer nativen App, aber ich denke, dass das Gefühl, nativ zu sein, von absoluter Bedeutung ist. Ich habe das Markup und CSS erstellt, um diese Idee widerzuspiegeln, und lasse mich dabei (kommentiert, um das Problem zu verstehen, das ich später habe):

Webapp markup

Dies alles funktioniert problemlos und hat den Vorteil, dass es sich wie ein Einheimischer anfühlt, mit statischen Kopf- und Fußzeilen und einer scrollbaren Innenansicht (dank -webkit-overflow-scrolling: touch).

Jeder, der iOS länger als 5 Minuten verwendet hat, weiß, dass Sie beim Scrollen nach oben oder unten eine gewisse Dynamik erhalten. Wenn Sie am Anfang einer Liste stehen, erhalten Sie außerdem einen netten Sprungeffekt:

List bouncing in Settings.app

Ich bin der Meinung, dass dies dazu beiträgt, das Gefühl von iOS zu definieren, und so ein kleines Detail kann einen langen Weg gehen. Glücklicherweise erhalten Sie den gleichen Effekt, wenn Sie sich in einem scrollbaren Element in einer Webanwendung unter dem oberen Rand einer Liste befinden und über den oberen Rand hinaus scrollen. Dies ist das gewünschte Verhalten in Aktion:

Scrolling down and up in a webapp produces this bouncing effect

Wenn Sie sich jedoch an der Spitze der Liste befinden und versuchen, dasselbe Springverhalten wie oben in der Liste (à la Setting.app, siehe oben) wiederherzustellen, erhalten Sie das folgende Verhalten, das nicht erwünscht ist Scrolling down produces the bouncing effect for the entire chrome of the app

Ich habe einige ähnlicheFragen zum Stack Overflow gesehen, aber alle entscheiden sich dafür, das Bouncen zu deaktivieren. Ich frage mich, ob es überhaupt möglich ist, weiterzuspielen, aber immer auf body section section#main aufzutreten, nicht auf webapps chrome . Ich verwende jQuery nicht, daher würde ich Antworten in direktem JavaScript bevorzugen (Bonuspunkte für eine CSS-Lösung).

Hier ist ein GitHub-Repo mit dem gesamten Code (Sinatra, HAML und Sass; aktueller Zweig ist so) oder ein JSFiddle mit defekten Bildern und Links, zeigt aber das fragliche Problem auf einem iPhone ( am besten zum Homescreen hinzufügen, um zu testen).

47
Kyle Lacy

ALTE INFO: Ich habe dieses Problem gelöst: http://www.hakoniemi.net/labs/scrollingOffset/nonbounce.html

NEW INFO: Dies ist jetzt ein jQuery-Plugin, das Sie hier finden können: http://www.hakoniemi.net/labs/nonbounce/ .

Es gibt verschiedene Probleme, beispielsweise den Verlust der Zoomfunktion, wenn diese Anwendung angewendet wird oder die dynamische Aktualisierung nicht reibungslos funktioniert.

Aber jetzt ist der einfachste Weg zu definieren: <div class="nonbounce">...</div> und dann $.nonbounce();

22
zvona

Ich stieß auf das gleiche Problem und kam zu dieser Lösung:

http://demo.josefkjaergaard.com/stackoverflow/element_scroll/index.html

Grundsätzlich verhindere ich, dass sich der Scroll-Inhalt in seiner maximalen Position befindet. Dadurch wird verhindert, dass der Body-Scroll aktiviert wird.

Es funktioniert, erzeugt aber am Ende der Lockerung einen kleinen Schnappschuss. Mit etwas mehr Arbeit könnte dieses Verhalten möglicherweise durch das Versetzen des Inhalts in die entgegengesetzte Richtung verborgen werden.

5
0
philfreo

Wie wäre es mit diesem Pseudo-Code:

document.body.addEventListener("ontouchstart", function(event) {
  if(document.getElementById("main").scrollTop > 0) return;
  event.preventDefault();
  event.stopPropagation();
}, false);
0
Kernel James