Ich erstelle eine Vollbild-Web-App, die einige Module / Widgets haben wird, die die neuen Überlauf-Funktionen von iOS 5 verwenden. Was ich will, ist diesen "bouncy" -Effekt zu deaktivieren, wenn man den html / body scrollt (da es Vollbild ist), aber behalte diesen Effekt nur für die scrollbaren Elemente.
um die Effekte der scrollbaren Elemente zu glätten, die ich habe:
%Vor%und dann das folgende Skript, das den Touch-Scroll-Effekt deaktiviert:
%Vor% obwohl dies anscheinend überhaupt nicht funktioniert, denn wenn man ein Element ganz nach unten oder oben scrollt, scrollt es auch den documentElement .
Gibt es eine Möglichkeit, diesen Effekt nur für das body html Element zu deaktivieren?
Hier ist ein gutes Beispiel dafür, wie sich dies auf die Funktionalität auswirkt:
Es stellt sich für mich heraus, dass die einzige effektive Lösung darin bestand, joelambert / ScrollFix zu verwenden, das funktionierte wirklich gut ohne Verzögerungen, Tatsächlich benutze ich es bereits in einem meiner Projekte.
Sie können darüber auch in sein Blogbeitrag . Sorry für die anderen Benutzer, die geantwortet haben, aber ich habe diese Antworten wirklich nicht bekommen, um für mich zu arbeiten.
Es ist bedauerlich, dass -webkit-overflow-scrolling das nicht besser beherrscht. Sie müssen die y -Position verfolgen, damit sie funktioniert. Ich stelle die Klasse scroll auf alles, was ich auf meiner Seite scrollen möchte, wie <ul> elements. Wickeln Sie ein <div> um das <ul> , das das Ansichtsfenster mit overflow-y: auto füllt. Setzen Sie overflow oder height nicht auf <ul> . Das <ul> wird so groß wie sein Inhalt und es ist das <div> , das gerade scrollt. -webkit-overflow-scrolling wird vererbt, also setze es so weit wie möglich nach oben in das DOM.
Demo: Ссылка
Skript:
%Vor%HTML:
%Vor%CSS:
%Vor%Hier ist eine ähnliche Antwort auf ThinkingStiff, außer dass es Ihre HTML-Struktur nicht vorschreibt. Es sucht nach Elementen, die übergelaufen sind und ermöglicht das Scrollen nur, wenn der Benutzer mit ihnen interagiert.
Nachteile:
Sobald der Benutzer die obere oder untere Grenze des scrollbaren Knotens erreicht, wird das Springen innerhalb dieses Knotens nicht stattfinden (aber es wird passieren, wenn Sie unter / über die Grenzen blättern). Dies bedeutet wahrscheinlich, dass es Ihren Anforderungen für Pull-to-Refresh nicht entspricht: (
Es gibt einen Unterschied von 2 px, den ich in meinen Testfällen bei der Berechnung von Scroll-Offsets bemerkt habe. Nicht sicher, woher das kam, und Sie müssen möglicherweise den Wert
CoffeeScript:
%Vor%Tags und Links javascript css webkit ios5 overflow