Ändern des Stils der Bildlaufleisten

Question

Ist es möglich, den Stil der Bildlaufleisten für alle Browser zu ändern? Wenn es ist, wie?

Answer 1

Es ist möglich, im Internet Explorer eine Reihe von Nicht-Standard-CSS-Eigenschaften . Ein praktisches Generatorwerkzeug finden Sie unter this page.

Darüber hinaus ist es möglich, nur benutzerdefinierte Scrollbar-Lösungen mit JavaScript zu verwenden. Die jScrollPane jQuery plugin sieht sehr schön und einfach zu installieren. Here ist eine Beispielseite.

Answer 2

Nein. IE ermöglicht Ihnen, Farben für einige Bestandteile der Bildlaufleiste festzulegen. Opera erlaubt ein paar, aber nicht alle diese Stile.

Das Scrollbar-Farbstyling ist von zunehmender Irrelevanz, da sich UIs in Richtung komplexer bildbasierter Scrollbar-Themes bewegen. Im IE wird durch das Festlegen einer der Farben das Rendering wieder auf eine einfache 3D-Bildlaufleiste im Windows 2000-Stil und nicht auf ein skurriles Benutzerdesign zurückgesetzt. Benutzer von Windows Vista/7 (Aero) werden Ihnen dafür wahrscheinlich nicht danken.

Sie können natürlich Ihre eigenen Ersatz-Scrollbars aus <div> s erstellen und sie so stylen, wie Sie möchten. Das Ergebnis verhält sich jedoch fast immer schlechter als echte Bildlaufleisten, da Sie versuchen, ein komplexes Oberflächenelement zu replizieren, dessen erwartetes Verhalten für jedes Betriebssystem unterschiedlich ist. Sie können eine Menge Zeit damit verbringen, Paging-Verhalten zu reproduzieren, Tastatur auf/ab und das Mausrad, aber es wird nie ganz fühlen, wie eine echte OS-Bildlaufleiste.

Answer 3

Sie können Bildlaufleisten für alle Browser mit ein wenig Javascript gestalten. Aber derzeit gibt es keine Möglichkeit, sie nur mit CSS als Cross-Browser-Lösung zu stylen.

This article will help if you decide to use Javascript.

Answer 4

Styling und Programmierung von Bildlaufleisten werden derzeit nicht von Standards behandelt, aber einige Hersteller haben Erweiterungen, um dieses Problem in Desktop-Webbrowsern zu beheben. Das jScrollPane jQuery-Plugin ist eine ausgezeichnete Wahl, wenn Sie benutzerdefinierte Bildlaufleisten verwenden möchten.

---

Vendor Extensions

Internet Explorer (ab Version 8) hat Erweiterungen für CSS und DOM so dass Sie nur Farbe der verschiedenen Teile eines Scrollbar spezifizieren.

Ein aktualisierter Link zur Microsoft-Dokumentation lautet: http://msdn.microsoft.com/en-us/library/ff974092(v=VS.85).aspx. Sie sollten nur alle Eigenschaften betrachten, die mit "-ms-scrollbar" beginnen.

WebKit (z. B. Safari und Chrome) verfügt über ein CSS-Pseudoelement zum Formatieren von Bildlaufleisten, mit dem Sie beliebige CSS-Eigenschaften darauf anwenden können. Um mehr zu erfahren sehen diese Surfin Safari Blog-Post: http://webkit.org/blog/363/styling-scrollbars/

Beispiel:

::-webkit-scrollbar 
{ 
    width: 13px; 
    height: 13px; 
} 

Mozilla (zum Beispiel Firefox) und Opera scheinen keine Unterstützung für Styling-Bildlaufleisten zu haben.

---

Individuelle Scroll-Leisten

In Bezug auf die JScrollPane jQuery-Plugin ist eine ausgezeichnete Wahl, wenn Sie benutzerdefinierte Scrollbars wollen. Es ist ziemlich umfassend in der Bewältigung der erwarteten Funktionalität von Bildlaufleisten und hält Sie davon ab, Ihre eigenen zu rollen.

Es ist wichtig zu wissen, dass jScrollPane die nativen Scrollbars des Browsers ersetzt, und Sie finden die "Berührungs- und Reaktionsfähigkeit" dieser benutzerdefinierten Scrollbars möglicherweise nicht so gut wie "die echte Sache". Aber dann wieder, es könnte gut genug sein, wenn Sie Form über Funktion bewerten.

Dies ist ein neueres Link zur JScrollPane Dokumentation: http://jscrollpane.kelvinluck.com/