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.
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änk...
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.
