Firefox 64 fügt Unterstützung für den Spezifikationsentwurf hinzu CSS Scrollbars Modul Stufe 1 der Folgendes hinzufügt zwei neue Objekte de scrollbar-width y scrollbar-color die eine gewisse Kontrolle über die Anzeige der Bildlaufleisten ermöglichen.
Sie können einstellen scrollbar-color auf einen der folgenden Werte setzen (Beschreibungen aus MDN):
auto Standard-Platform-Rendering für den Track-Teil des Rollbalkens, wenn keine anderen zugehörigen Rollbalken-Farbeigenschaften vorhanden sind.<color> <color> Wendet die erste Farbe auf den Daumen der Bildlaufleiste an, die zweite auf die Spur der Bildlaufleiste.
Zuvor enthielt die Spezifikation dark y light Werte was wurden nicht in Firefox implementiert . Diese Werte wurden inzwischen aus der Spezifikation entfernt.
Unter Android mit mobilem Firefox kann der Daumen eingefärbt werden, aber es gibt keine Spur zum Einfärben.
Zusätzlich konnten in macOS-Firefox-Versionen vor 99.0 die automatisch ausblendenden halbtransparenten Bildlaufleisten, die der macOS-Standard sind, nicht durch diese Regeln gestaltet werden. Ab Firefox 99.0 können alle macOS-Scrollbar-Modi (konfiguriert unter Systemeinstellungen > Scrollbars anzeigen) eingefärbt werden.
Visuelle Demo:
.scroll {
width: 20%;
height: 100px;
border: 1px solid grey;
overflow: scroll;
display: inline-block;
}
.scroll-color-auto {
scrollbar-color: auto;
}
.scroll-color-colors {
scrollbar-color: orange lightyellow;
}
<div class="scroll scroll-color-auto">
<p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p>
</div>
<div class="scroll scroll-color-colors">
<p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p>
</div>
Sie können einstellen scrollbar-width auf einen der folgenden Werte setzen (Beschreibungen aus MDN):
auto Die Standardbreite der Bildlaufleiste für die Plattform.thin Eine dünne Variante der Bildlaufleiste auf Plattformen, die diese Option bieten, oder eine dünnere Bildlaufleiste als die Standardbreite der Plattform-Bildlaufleiste.none Es wird keine Bildlaufleiste angezeigt, das Element lässt sich jedoch weiterhin verschieben.
Sie können auch einen bestimmten Längenwert gemäß der Spezifikation festlegen. Beide thin und eine bestimmte Länge kann nicht auf allen Plattformen etwas bewirken, und was genau sie bewirkt, ist plattformspezifisch. Insbesondere scheint Firefox derzeit keinen spezifischen Längenwert zu unterstützen ( Dieser Kommentar im Bug-Tracker scheint dies zu bestätigen ). Die Website thin keywork scheint jedoch gut unterstützt zu werden, zumindest unter macOS und Windows.
Bei Standard-Android mit mobilem Firefox wird die auto der Daumen ist schon recht dünn, und thin macht es nicht dünner.
Es ist wahrscheinlich erwähnenswert, dass die Option length value und der gesamte scrollbar-width Eigenschaft werden für die Entfernung in einem zukünftigen Entwurf in Betracht gezogen, und wenn das passiert, könnte diese spezielle Eigenschaft in einer zukünftigen Version von Firefox entfernt werden.
Visuelle Demo:
.scroll {
width: 30%;
height: 100px;
border: 1px solid grey;
overflow: scroll;
display: inline-block;
}
.scroll-width-auto {
scrollbar-width: auto;
}
.scroll-width-thin {
scrollbar-width: thin;
}
.scroll-width-none {
scrollbar-width: none;
}
<div class="scroll scroll-width-auto">
<p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p>
</div>
<div class="scroll scroll-width-thin">
<p>thin</p><p>thin</p><p>thin</p><p>thin</p><p>thin</p><p>thin</p>
</div>
<div class="scroll scroll-width-none">
<p>none</p><p>none</p><p>none</p><p>none</p><p>none</p><p>none</p>
</div>
