Ratgeber: "Mobile Entwicklung" So sorgen Sie für zuverlässiges Scrollverhalten
© Internet Magazin
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
Weisen Sie jedem betreffenden Element ganz einfach die Klasse overthrow hinzu:
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:
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.
