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.
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…
Als Testgeräte verwendeten wir (von links nach rechts) ein Nokia E6 mit Symbian Anna, ein Radar mit Win Phone 7.5, ein iPhone 4S und ein Base Lutea 2 (= ZTE Skate) mit Android 2.3.5.
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…
Routenplanung im Web
Ratgeber: "Navigation"

Auf ins Grüne! Wandern ist längst kein Rentnersport mehr - dank Geocaching lassen sich sogar Teenager dazu überreden. Im Web finden Wanderer, Biker…
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…