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.

© 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 lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

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.
Billig surfen im Ausland

Trotz EU-Richtlinie ist das Daten-Roaming im Ausland noch immer ein teures und eher unberechenbares Vergnügen. Ein automatisches Software-Update im…
Reise-WLAN

Kein WLAN verfügbar? Erste Hilfe für unterwegs: Fast alle modernen Smartphones lassen sich als Modem für das Note- oder Netbook verwenden. Die…
Handy weg, was nun?

Das neue iPhone 5 oder das Samsung Galaxy S4-Smartphone ist weg, was nun? Wir geben Tipps, wie Sie iPhones oder Android-Geräte orten und wiederfinden…
Fritzbox-Hack

Telekom-Mails für über 12.000 Fritzbox-User, die noch kein Sicherheits-Update geladen haben: Es geht immer noch um den Fritzbox-Hack von Anfang…