Sea of Sin / Blog

Als kleines Beispiel für was scrollbare Div's zu gebrauchen sind wäre:
Oftmals besitzt man verschiedene Anzeigebereiche wie eigene Auswahllisten. Diese sollen sich natürlich wie richtige Auswahllisten verhalten. Dazu gehört natürlich auch, dass Verhalten wenn zu viele Einträge in der Auswahlliste vorhanden sind, dass dann auch Scrollbalken erscheinen.

Nun wie geht man hier vor?

Als erstes wird ein herkömmliches Div benötigt.

<div></div>

Entweder vergeben wir diesem eine ID oder eine Klasse um CSS darauf anzuwenden.

<div id="scroll"></div>

Nun werden CSS Anweisungen verwendet, welche dem DIV festlegen dass es bei zu großem Inhalt scrollen soll. Damit es auch in allen Browser funktioniert, benötigen wir 3 Angaben.

overflow:auto;
overflow-y:auto;
overflow-x:auto;

Was macht Overflow? Overflow sagt, wie sich ein Element verhalten soll wenn der Inhalt grösser ist wie der Bereich der zur Verfügung steht.
Da IE, Opera und Firefox jedoch diese Eigenschaft extrem unterschiedlich interpretieren müssen alle 3 Angaben verwendet werden.

Der Wert auto bedeutet, wenn der Inhalt zu groß ist, soll der Browser entscheiden was passiert. Wenn alle 3 Angaben gemacht werden, entscheiden sich alle 3 Browser für die Scrollbars. Neben "auto" gibt es noch "hidden" (Inhalt der zu gross ist nicht anzeigen), scroll (immer Scrollbalken anzeigen) oder visible (trotzdem anzeigen wenn der Inhalt zu groß ist)

Zurück zu unseren CSS Anweisungen. Dies könnten nun so aussehen:

Das DIV scrollt natürlich nur, wenn eine Höhe angegeben wurde.

#scroll {
overflow:auto;
overflow-y:auto;
overflow-x:auto;
height: 200px;
}

Hmm, jetzt gibt es aber noch ein Problem. Opera und IE können in dem DIV per Mausrad in dem DIV scrollen. Nur der Firefox macht irgendwie hier extrem Zicken :-)
Aber auch hier gibt es Abhilfe

-moz-user-focus: normal;

D.h. unsere fertige CSS Anweisungen sieht nun folgendermaßen aus:

#scroll {
overflow:auto;
overflow-y:auto;
overflow-x:auto;
height: 200px;
-moz-user-focus: normal;
}

Vielleicht hilft dies einigen, vor allem die moz-user-focus Eigenschaft sollte etwas unbekannt sein.
Bei Fragen, nicht zögern und einfach im Forum schreiben.

greetz henbug