in Programmierung

Scrollbare DIVs und Smartphones

Wer mal Webseiten fürs Smartphone programmiert hat und dabei die neue HTML5-Technik anwenden wollte, inkl. dynamisch nachgeladener Inhalte, kennt vermutlich dieses Problem. DIV-Boxen sind bei Smartphones nicht scrollbar. Damit das am Ende doch geht, hat es viele sinnlose einige Tests benötigt.

Die Lösung fand ich in dem Projekt iScroll. Ich musste die JavaScript-Datei herunterladen und im Header einbinden:
[cc lang=’html‘]

[/cc]

Anschließend definierte ich eine div-Box mit eindeutiger ID, welche Scrollbar sein soll. Leider musste ich in die Div-Box noch einmal eine Div-Box einbetten, in der ich dann erst meinen Inhalt anlegen konnte. Mit mehreren nacheinanderfolgenden Elementen hat es ansonsten mit dem Scrollen nicht so funktioniert :(.
[cc lang=’html‘]

[/cc]

Im JavaScript erstellt man nun ein neues iScrollobjekt, dem man die ID der scrollbaren div-Box übergibt:
[cc lang=’js‘]
var iscroll_nav = new iScroll(’nav‘);
[/cc]

Nun wirds tricky, denn ich Lade via jQuery Inhalte dynamisch nach und packe sie in die div-Box. Die Klasse ermittelt aber nur beim erstellen des Objektes die Größe von ihm und stellt damit den Scrollbereich ein. Wird die Box plötzlich unwesentlich größer, kann ich dennoch nur in der Dimension, wie sie vorher war scrollen. Um dies abzustellen, muss man nach dem laden einen refresh aufrufen:
[cc lang=’js‘]
iscroll_nav.refresh();
[/cc]

Leider hat das bei mir nicht so ganz funktioniert. Scheinbar wurde der Refresh (obwohl im Quelltext nach der Inhaltsänderung ausgeführt) zur früh aufgerufen, so dass auch weiterhin nur der alte Scrollbereich verschiebbar war. Am Ende holte ich den Holzhammer heraus und baute eine Timeout-Funktion, die schlicht jede Sekunde die Größe der div-Box neu ermittelt und somit auch verspätet eintreffenden Inhalt nach maximal einer Sekunde in die Scrollfunktionalität einberechnet.
[cc lang=’js‘]
function nav_refresh_trigger() {
iscroll_nav.refresh();
setTimeout(’nav_refresh_trigger()‘, 1000);
}

nav_refresh_trigger();
[/cc]