Ratgeber: "Mobile Entwicklung"

So sorgen Sie für zuverlässiges Scrollverhalten

Eine konsequente Unterstützung der recht beliebten overflow-Eigenschaft beschränkt sich derzeit auf Desktop-Browser, doch gerade mobile Benutzer würden daraus den größten Nutzen ziehen.

So sorgen Sie für zuverlässiges Scrollverhalten

© Internet Magazin

So sorgen Sie für zuverlässiges Scrollverhalten

Dabei müssen sich mobile Besucher zum Teil mit den lästigsten Usability-Problemen im Zusammenhang mit fehlender oder fehlerhafter Unterstützung für diese Eigenschaft herumschlagen. Anbieter mobiler Browser beginnen zwar langsam, die benötigte Funktion nachzuliefern, doch dieser Trend beschränkt sich primär auf neuere Geräte.

Benutzer von Mobile Safari in iOS5, Chrome für Android, Blackberry ab Version 7, Playbook sowie Firefox Mobile und WebOS 3 (einschließlich Touchpad) bieten bereits nativen Support für die overflow-Eigenschaft. Das trifft auf ältere mobile Browser überhaupt nicht zu.

Mit der Ausnahme von Chrome und Safari in iOS 5 (diese unterstützen nämlich zusätzlich die Eigenschaft -webkit-overflow-scrolling: touch) ist es nahezu unmöglich, die Unterstützung für die benötigte Eigenschaft korrekt zu erkennen, um ein entsprechend angepasstes Layout zu servieren. Abhilfe schafft eine winzige Bibliothek namens Overthrow .

Zuverlässiges Scrollverhalten mit Overthrow

Durch die Einbindung dieser Bibliothek können Sie ein stets zuverlässiges Scrollverhalten Ihrer Layouts in (mit nur wenigen Ausnahmen) allen gängigen mobilen User Agents mühelos umsetzen. Overthrow verträgt sich problemlos mit Formularelementen.

Anstatt das Scrollen mit CSS zu simulieren, nutzt die Bibliothek native Javascript-Eigenschaften scrollTop und scrollLeft, sodass Sie damit jedes Standardscrollverhalten implementieren können.

Nach der Einbindung der Bibliothek mittels

<script src="overthrow.js"></script>

Weisen Sie jedem betreffenden Element ganz einfach die Klasse overthrow hinzu:

<div id="foo" class="overthrow">Inhalt</div>

In Browsern, die entweder die overflow-Eigenschaft nativ oder mit dem Pollyfill-Workaround unterstützen, weist die Bibliothek dem <html>-Element die Klasse overthrow-enabled hinzu. Um die Bibliothek zu aktivieren müssen Sie noch Ihre CSS-Stylesheets um den folgenden Code

ergänzen:

.overthrow-enabled .overthrow {
overflow: auto;
-webkit-overflow-scrolling: touch;
}

Dadurch wird Elementen der Klassen .overthrow-enabled und .overthrow in den unterstützten Browsern die Eigenschaft overflow: auto zugewiesen. In Browsern, die weder über eine native Unterstützung der overflow-Eigenschaft verfügen noch nachträglich um diese Funktion ergänzt werden können, werden die betreffenden Inhalte garantiert nicht beschnitten.

Mehr zum Thema

intenet, webdesign, Titanium, Appcelerator, Webtechnologien,iPhone, iPad, objective-c
Apfel für die Hosentasche

Titanium von Appcelerator ermöglicht die Erstellung von mobilen Anwendungen auf Basis von etablierten Webtechnologien - auch für iPhone und iPad.
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden Ergebnissen…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen.…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
Flatrate-Angebote im Überblick.
Mobile Flatrates als Kostenfalle

Dank Flatrates ist es möglich, sorglos zu telefonieren oder zu surfen, ohne an lästige Zusatzkosten denken zu müssen - eigentlich. Denn die Anbieter…