CSS-Tools · läuft in Ihrem Browser

Scrollbar-Styler

Scrollbars mit Standard-Eigenschaften und WebKit-Fallback gestalten.

Keine Anmeldung Kein Dateilimit Nichts wird hochgeladen

Scrollbar-Styler

So wird es benutzt 3 Schritte
  1. Legen Sie Breite und Daumenradius fest.
  2. Wählen Sie Leistenfarbe, Daumenfarbe und die Hover-Farbe.
  3. Wählen Sie unter Anwenden auf den Geltungsbereich und drücken Sie CSS kopieren.

Dieses Panel scrollen, um die gestaltete Scrollleiste zu sehen.

Jede Änderung unten wirkt hier sofort — mit denselben Deklarationen wie im CSS-Block.

Die Standardeigenschaften kommen zuerst, dann die WebKit-Pseudo-Elemente als Fallback für Browser, die sie nicht implementiert haben.

Firefox unterstützt scrollbar-width und scrollbar-color seit Jahren; Chrome und Safari haben sie erst später aufgenommen und beachten die Pseudoelemente weiterhin.

Daumen und Leiste im Kontrast weit genug auseinanderhalten, damit das Bedienelement sichtbar bleibt — eine Scrollleiste ist ein interaktives Element.

Weiterscrollen.

Und noch weiter.

Ende des Beispielinhalts.

Die Standardeigenschaft scrollbar-width akzeptiert nur auto, thin oder none – keine Längenangabe.
Generiertes CSS






	Beide Syntaxformen werden ausgegeben, weil keine für sich allein alle Browser abdeckt: scrollbar-width und scrollbar-color sind der Standard und in Firefox der einzige Weg, während allein die Pseudoelemente ::-webkit-scrollbar eine exakte Pixelbreite oder einen Eckenradius erlauben. Greifen beide, setzen sich die Standardeigenschaften durch und die Pixelbreite wird ignoriert. Eine Bildlaufleiste ganz auszublenden entfernt einen sichtbaren Bedienhinweis und sollte überall dort unterbleiben, wo jemand sie finden muss.


			


			
			
					

			
So funktioniert dieses Werkzeug


							
Zwei verschiedene Mechanismen werden zusammen ausgegeben, weil keiner für sich genügt. Die Standardeigenschaften scrollbar-width und scrollbar-color sind der einzige Weg, den Firefox anbietet, und sie sind bewusst begrenzt: ein Schlüsselwort für die Breite und ein Farbpaar, mehr nicht. Die WebKit-Pseudoelemente sind die einzige Möglichkeit, eine exakte Pixelbreite oder einen Eckenradius zu setzen, und Chrome, Edge und Safari verstehen sie seit Jahren.

			
							
Die Regel gilt nur für den Selektor, den Sie eingeben, und das wiegt schwerer, als es klingt: Auf die ganze Seite angewandt betrifft eine umgestaltete Scrollleiste jede Leserin, auf ein Panel begrenzt nur die Komponente, die Sie gemeint haben. Die Vorschau steuert ihre Pseudoelemente über eigene Eigenschaften, weil ein Pseudoelement über den Inline-Stil eines Elements nicht erreichbar ist.

			
												
Ein Bedienelement umgestalten, auf das sich Menschen verlassen

								
    
																	
  • 
															Eine schmale Scrollleiste ist ein kleineres Ziel:
														Sowohl das Schlüsselwort thin als auch eine geringe Pixelbreite verkleinern die Fläche, die mit der Maus getroffen werden muss. Bei einem Bedienelement zur Navigation ist das ein echter Preis, und auf langen Seiten lohnt es sich, die Standardbreite zu belassen.						
    • 
																	
  • 
															Der Kontrast zwischen Griff und Schiene macht sie benutzbar:
														Ein Griff, der sich kaum von seiner Schiene abhebt, verschwindet vor der Seite. Die 3:1-Untergrenze für Nichttext ist das richtige Ziel, denn der Griff ist ein Bedienelement und keine Dekoration.						
    • 
																	
  • 
															Die beiden Syntaxen werden nicht exakt übereinstimmen:
														Firefox rundet die Breite auf seine eigene Vorstellung von thin oder auto und ignoriert den Radius vollständig — dieselbe Regel sieht in verschiedenen Browsern also leicht anders aus, und zwar systembedingt, nicht fehlerhaft.						
    • 
																	
  • 
															Overlay-Scrollleisten ignorieren das meiste davon:
														macOS und Touch-Geräte blenden die Scrollleiste aus, solange sie ungenutzt ist, und zeichnen sie auf ihre eigene Weise. Betrachten Sie die Gestaltung als Verbesserung auf Zeigegeräten, nicht als verlässliches Layout.						
    • 
									

					

		
			
Two syntaxes, because neither is enough



The standard properties — scrollbar-width and scrollbar-color — are the only route Firefox offers, and they are deliberately limited: a keyword for the width, a pair of colours, nothing else. No radius, no exact pixel size, no separate hover state.



The WebKit pseudo-elements can set all of that, and Chrome, Edge and Safari have understood them for years.



So the [msm_tool slug="scrollbar-styler"] emits both, and the two will never look identical. Firefox rounds the width to its own idea of thin or auto and ignores the radius entirely. That is by design rather than a bug, and it is worth knowing before you spend time trying to reconcile them.



Scope it to a panel



The rule applies to whatever selector you give it, and that choice matters more than it sounds.



Applied to the whole page, a restyled scrollbar affects every reader on every screen. Applied to a code block, a sidebar or a scrolling table, it affects only the component you meant. The main page scrollbar is a control people rely on and have muscle memory for; there is rarely a good reason to redesign it.



A thin scrollbar is a smaller target



Both the thin keyword and a narrow pixel width shrink the area a person has to hit with a mouse. On a control used for navigation that is a genuine cost, not an aesthetic one.



Motor impairments make it worse, and so does a trackpad, and so does a large monitor where the scrollbar is a long way from the pointer. On long pages, leaving the default width is usually the right answer.



Contrast between thumb and track



The thumb is an interactive control, which means it is held to 3:1 against the track rather than to any decorative standard.



A thumb that barely differs from its track disappears against the page — and the fashionable version of this style, a very pale grey thumb on a white track, fails comfortably. If the scrollbar is worth styling at all, it is worth being visible.



Overlay scrollbars ignore most of it



macOS and touch platforms draw scrollbars as overlays that hide when idle and appear briefly during a scroll. They are drawn by the operating system in its own style, and most of what you set does not apply.



Treat scrollbar styling as an enhancement on pointer devices, not as a layout you can depend on. A design that only works when the scrollbar is a specific width will break on half the machines that visit it.



Do not hide it



It is possible to make a scrollbar invisible while keeping the element scrollable. It is almost always a mistake.



The scrollbar is the only indication that there is more content, and how much. Removing it means some users never discover the rest of a list, and it removes the ability to drag to a position. Horizontal carousels with hidden scrollbars are the usual offender: what reads as a clean design to the person who built it reads as a truncated list to someone who does not know to swipe.



If the scrollbar is visually intrusive, style it to be quieter. Do not remove it.



What is worth styling



    
	
  • Code blocks and pre elements — a default scrollbar inside a dark code block looks out of place, and this is the clearest case for restyling.
    • 
	
  • Dark-mode surfaces — a light system scrollbar on a dark panel is jarring, and scrollbar-color alone fixes it in every browser.
    • 
	
  • Scrolling panels inside an application shell — sidebars, drawers, data tables.
    • 




For the last two, scrollbar-color on its own is often the whole answer. It works everywhere, it needs no prefixed block, and it solves the actual complaint.

			
			
					

			

				

					Häufig gestellte Fragen				

				

					Speziell zum Scrollbar-Styler. Allgemeinere Fragen zu dieser Kategorie werden auf der Kategorieseite beantwortet.				

			


					

											

					
					

						
Firefox versteht nur die Standardeigenschaften, und nur die WebKit-Pseudoelemente können eine exakte Breite oder einen Radius setzen. Beides zusammen deckt jeden Browser ab.

					

				

											

					
					

						
Die Standardeigenschaft nimmt ein Schlüsselwort statt einer Länge und kennt gar keinen Radius. Firefox übernimmt die Farben und wählt seine Breite selbst.

					

				

											

					
					

						
Meist nicht. Begrenzen Sie es auf ein Panel oder einen Codeblock. Die Hauptscrollleiste ist ein Bedienelement, auf das sich Menschen verlassen, und eine umgestaltete ist eine weitere Fehlerquelle.

					

				

											

					
					

						
Mindestens 3:1 gegenüber der Schiene. Der Griff ist ein interaktives Bedienelement, es gilt also die Nichttext-Untergrenze und kein dekorativer Maßstab.

					

				

											

					
					

						
Touch-Plattformen zeichnen Overlay-Scrollleisten auf ihre eigene Weise und blenden sie im Ruhezustand aus. Scrollleisten-Gestaltung ist eine Verbesserung für Zeigegeräte.

					

				

					

				

		
			


			

		

	









	

		

			

				
									
Abonniere Benachrichtigungen zu neuen Tools, Funktionen und Produktivitätstipps.