Individuelle Scroll-Leiste oder designverträgliche Alternative?

[Camping_RIDER]

Aloha ;)

Soweit ich das verstanden habe, ist eine Umgestaltung der vom jeweiligen Browser automatisch eingefügten Scroll-Leisten praktisch unmöglich. Ok.

Die Alternative wäre dann ja, eigene Scroll-Leisten zu gestalten, aber auch dafür habe ich kein praktisches Tutorial gefunden, sondern nur den Verweis auf jQuery, das ich nicht benutzen will, oder aber irgendwelche downloadbaren JavaScript-Dateien, die völlig unstrukturiert und praktisch unlesbar formatiert sind.

Humm-Homm... eine Alternative hätte ich noch aus dem Ärmel zu schütteln. Die ist auch unkonventionell und ich hoffe mal, ich werde dafür nicht von der Allgemeinheit gesteinigt.

Umstylen kannst du sie nicht. Aber vielleicht verstecken? Schließlich haben die Leisten in allen Browsern eins gemeinsam: Sie sind alle schmal. Schätzungsweise max. 10-15px? Also. Dann nimm um dein Navigations-div (bzw. nav) ein div, das 15px weniger breit ist und overflow:hidden; hat. Dem nav gibst du ein overflow:scroll, dann sind die Scrollbalken immer da. Ende der Zauberei.

Das Ergebnis: deine nav lässt sich durch native Methoden (Scrollrad, wischen) scrollen und die Scrollbalken sind nicht sichtbar. Nachteil: es ist weniger klar, dass die nav überhaupt scrollbar ist. Last but not least: eine zumindest formal unschöne Lösung.

Ein bisschen besser (nicht formal, aber für den Standarduser) wirds, wenn du deine Buttons dazunimmst. Die lassen sich wahrscheinlich über die nicht-standardkonforme Eigenschaft scrollLeft bedienen. Das sollte laut Aussagen in allen wichtigen Browsern funktionieren. Und für alle ohne Javascript oder ohne scrollLeft-Support ist das native scrollen ja möglich. Aus gegebenem Anlass (scroll per Button nur bei Browserunterstützung und JS) würde ich die Buttons per JS einfügen, sobald im JS getestet wurde, ob entsprechende Unterstützung vorhanden ist.

Grüße,

RIDER