CSS-Bildlaufleisten-Generator

Chrome, Safari und Edge gestalten Bildlaufleisten mit der ::-webkit-scrollbar-Familie von Pseudo-Elementen: separate Regeln für die Spur, den Daumen und den Hover-Zustand des Daumens, plus pixelgenaue Breite und einen Daumen-Border-Radius. Firefox ignoriert all das vollständig und liest stattdessen zwei Standardeigenschaften, scrollbar-width und scrollbar-color, die später in die CSS-Scrollbars-Spezifikation aufgenommen wurden. Das sind nicht zwei Dialekte derselben Funktion – es sind zwei unterschiedliche Funktionsumfänge mit unterschiedlichen Obergrenzen, und die meisten Bildlaufleisten-Generatoren überdecken diese Lücke stillschweigend, indem sie nur das WebKit-Ergebnis zeigen. Dieser hier nicht.

Stellen Sie einmal Breite, Spurfarbe, Daumenfarbe, Hover-Farbe und Daumen-Eckenradius ein, und das Tool erstellt zwei Regelsätze aus denselben Eingaben. Der WebKit-Block beschränkt ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb und dessen :hover-Zustand auf die linke Demo-Box, sodass Sie dort genau das sehen, was Chrome, Safari und Edge rendern – die echte Engine des Browsers, keine simulierte Überlagerung. Der Firefox-Block setzt scrollbar-width und scrollbar-color auf der rechten Demo-Box mit der Engine dieses Browsers, weshalb die Box nur dann anders aussieht, wenn diese Seite tatsächlich in Firefox geöffnet ist; in einem WebKit-Browser zeigt sie dort ihre eigene Standard-Bildlaufleiste, und das Tool sagt das, anstatt ein Firefox-Aussehen mit geliehenen Pixeln vorzutäuschen.

Die Breitenabbildung ist das deutlichste Beispiel für die Lücke: Firefoxs scrollbar-width akzeptiert nur die Schlüsselwörter auto, thin oder none – nie eine exakte Pixelangabe. Dieser Generator bildet Ihre gewählte Breite ehrlich ab (8px und darunter wird zu thin, alles Breitere wird zu auto) und zeigt das resultierende Schlüsselwort neben Ihrer Eingabe an, anstatt ein gefälschtes pixelgenaues Firefox-Ergebnis zu erfinden, das es nicht gibt. Firefox hat auch keine Möglichkeit, eine separate Hover-Farbe, einen unabhängigen Daumen-Border-Radius oder eine Spurfarbe festzulegen, die nicht einfach der zweite Wert von scrollbar-color ist – das sind dauerhafte, reale Einschränkungen der Plattform, keine Auslassungen dieses Tools.

Kopieren Sie den kombinierten CSS-Block, und beide Regelsätze reisen zusammen, jeder unter seinem eigenen Kommentar, bereit zum direkten Einfügen in ein Stylesheet. Alles rendert und aktualisiert sich in Ihrem eigenen Browser, während Sie die Steuerelemente ziehen – kein Upload, kein Konto, kein Server-Roundtrip, und es funktioniert weiterhin offline, sobald die Seite geladen ist.