it-swarm.com.de

Benutzerdefinierte CSS-Bildlaufleiste für Firefox

Ich möchte eine Bildlaufleiste mit CSS anpassen.

Ich verwende diesen WebKit-CSS-Code, der für Safari und Chrome gut funktioniert:

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

::-webkit-scrollbar-track-piece  {
    background-color: #C2D2E4;
}

::-webkit-scrollbar-thumb:vertical {
    height: 30px;
    background-color: #0A4C95;
}

Wie kann ich dasselbe in Firefox tun?

Ich weiß, dass ich es einfach mit jQuery machen kann, aber ich würde es vorziehen, mit reinem CSS zu arbeiten, wenn es machbar ist.

Wäre dankbar für jemandes kompetenten Rat!

277

Ab Ende 2018 sind in Firefox nur noch eingeschränkte Anpassungsmöglichkeiten verfügbar!

Siehe diese Antworten:

Und dies für Hintergrundinformationen: https://bugzilla.mozilla.org/show_bug.cgi?id=1460109


Es gibt kein Firefox-Äquivalent zu ::-webkit-scrollbar und Freunden.

Sie müssen sich an JavaScript halten.

Viele Leute möchten diese Funktion, siehe: https://bugzilla.mozilla.org/show_bug.cgi?id=7779


Was das Ersetzen von JavaScript angeht, können Sie Folgendes versuchen:

215
thirtydot

Darf ich eine Alternative anbieten?

Kein Scripting, nur standardisierte CSS-Stile und ein bisschen Kreativität. Kurze Antwort - Sie maskieren Teile der vorhandenen Browser-Bildlaufleiste, sodass Sie die gesamte Funktionalität behalten.

.scroll_content {
    position: relative;
    width: 400px;
    height: 414px;
    top: -17px;
    padding: 20px 10px 20px 10px;
    overflow-y: auto;
}

Hier finden Sie eine Demo und eine etwas ausführlichere Erklärung ...

jsfiddle.net/aj7bxtjz/1/

41
Tomaz

Ich dachte, ich würde meine Erkenntnisse mitteilen, falls jemand ein JQuery-Plugin in Betracht zieht, um diesen Job zu erledigen.

Ich habe JQuery Custom Scrollbar probiert. Es ist ziemlich ausgefallen und bietet ein flüssiges Scrollen (mit Bildlaufträgheit) und eine Vielzahl von Parametern, die Sie optimieren können, aber es hat sich für mich als etwas zu rechenintensiv erwiesen (und es fügt dem DOM eine ganze Menge hinzu).

Jetzt gebe ich perfekte Bildlaufleiste los. Es ist einfach und leicht (6 KB) und leistet bisher gute Arbeit. Es ist überhaupt nicht CPU-intensiv (soweit ich das beurteilen kann) und fügt Ihrem DOM sehr wenig hinzu. Es gibt nur ein paar Parameter für Tweak (wheelSpeed ​​und wheelPropagation), aber es ist alles, was ich brauche, und es handhabt Aktualisierungen des Bildlaufinhalts (wie das Laden von Bildern).

P.S. Ich habe mir JScrollPane kurz angesehen, aber @simone hat recht, es ist jetzt ein bisschen veraltet und eine PITA.

36
Markus Coetzee

Firefox 64 bietet Unterstützung für die Spezifikation draft CSS Scrollbars Module Level 1 , die zwei neue Eigenschaften von ) hinzufügt _scrollbar-width_ und scrollbar-color , mit denen Sie steuern können, wie Bildlaufleisten angezeigt werden.

Sie können scrollbar-color auf einen der folgenden Werte setzen (Beschreibungen von MDN):

  • auto Standard-Plattform-Rendering für den Track-Teil der Bildlaufleiste, sofern keine anderen verwandten Bildlaufleisten-Farbeigenschaften vorhanden sind.
  • dark Dunkle Bildlaufleiste anzeigen. Dies kann entweder eine dunkle Variante der von der Plattform bereitgestellten Bildlaufleiste oder eine benutzerdefinierte Bildlaufleiste mit dunklen Farben sein.
  • light Eine helle Bildlaufleiste anzeigen, die entweder eine helle Variante der von der Plattform bereitgestellten Bildlaufleiste oder eine benutzerdefinierte Bildlaufleiste mit hellen Farben sein kann.
  • _<color>_ _<color>_ Wendet die erste Farbe auf den Bildlaufleisten-Daumen und die zweite auf die Bildlaufleisten-Spur an.

Beachten Sie, dass die Werte dark und lightsind derzeit in Firefox nicht implementiert .

macOS-Hinweise:

Die automatisch ausgeblendeten halbtransparenten Bildlaufleisten, die die Standardeinstellung von macOS sind, können mit dieser Regel nicht eingefärbt werden (sie wählen weiterhin ihre eigene Kontrastfarbe basierend auf dem Hintergrund aus). Nur die permanent angezeigten Bildlaufleisten (Systemeinstellungen> Bildlaufleisten anzeigen> Immer) sind farbig.

Visuelle Demo:

_.scroll {
  width: 20%;
  height: 100px;
  border: 1px solid grey;
  overflow: scroll;
  display: inline-block;
}
.scroll-color-auto {
  scrollbar-color: auto;
}
.scroll-color-dark {
  scrollbar-color: dark;
}
.scroll-color-light {
  scrollbar-color: light;
}
.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-dark">
<p>dark</p><p>dark</p><p>dark</p><p>dark</p><p>dark</p><p>dark</p>
</div>

<div class="scroll scroll-color-light">
<p>light</p><p>light</p><p>light</p><p>light</p><p>light</p><p>light</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 scrollbar-width auf einen der folgenden Werte setzen (Beschreibungen von MDN):

  • auto Die Standardbreite der Bildlaufleiste für die Plattform.
  • thin Eine Variante mit dünner Bildlaufleistenbreite 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 kann jedoch weiterhin gescrollt werden.

Sie können auch einen bestimmten Längenwert gemäß der Spezifikation festlegen. Sowohl thin als auch eine bestimmte Länge können möglicherweise nicht auf allen Plattformen ausgeführt werden, und was genau dies ist, ist plattformspezifisch. Insbesondere scheint Firefox derzeit keinen bestimmten Längenwert zu unterstützen ( dieser Kommentar in ihrem Bug-Tracker scheint dies zu bestätigen ). Die thin -Schlüssel scheinen jedoch gut unterstützt zu werden, zumindest mit MacOS- und Windows-Unterstützung.

Es ist wahrscheinlich erwähnenswert, dass die Option length value und die gesamte Eigenschaft _scrollbar-width_ in einem zukünftigen Entwurf zum Entfernen in Betracht gezogen werden. In diesem Fall wird diese bestimmte Eigenschaft möglicherweise in einer zukünftigen Version von Firefox entfernt.

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>_
29

Da Firefox 64 , ist es möglich, neue Spezifikationen für ein einfaches Scrollbar-Styling ( zu verwenden, das nicht so vollständig ist wie in Chrome mit Herstellerpräfixe ).

In dieses Beispiel ist eine Lösung zu sehen, die unterschiedliche Regeln kombiniert, um sowohl Firefox als auch Chrome mit einem ähnlichen (nicht gleichen) Endergebnis anzusprechen (Beispiel: Verwenden Sie Ihr ursprüngliches Chrome Regeln):

Die wichtigsten Regeln sind:

Für Firefox

.scroller {
  overflow-y: scroll;
  scrollbar-color: #0A4C95 #C2D2E4;
}

Für Chrome

.scroller::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

.scroller::-webkit-scrollbar-track-piece  {
    background-color: #C2D2E4;
}

.scroller::-webkit-scrollbar-thumb:vertical {
    height: 30px;
    background-color: #0A4C95;
}

Beachten Sie, dass in Bezug auf Ihre Lösung auch die folgenden einfacheren Chrome Regeln verwendet werden können:

.scroller::-webkit-scrollbar-track  {
    background-color: #C2D2E4;
}

.scroller::-webkit-scrollbar-thumb {
    height: 30px;
    background-color: #0A4C95;
}

Um die Pfeile in den Bildlaufleisten auch in Firefox auszublenden, müssen Sie sie derzeit mit der folgenden Regel scrollbar-width: thin; auf " thin " setzen.

17
Luca Detomi

Es funktioniert im Benutzerstil und scheint auf Webseiten nicht zu funktionieren. Ich habe keine offizielle Anweisung von Mozilla dazu gefunden. Obwohl es irgendwann funktioniert hat, hat Firefox keine offizielle Unterstützung dafür. Dieser Fehler ist noch offen https://bugzilla.mozilla.org/show_bug.cgi?id=7779

scrollbar {
/*  clear useragent default style*/
   -moz-appearance: none !important;
}
/* buttons at two ends */
scrollbarbutton {
   -moz-appearance: none !important;
}
/* the sliding part*/
thumb{
   -moz-appearance: none !important;
}
scrollcorner {
   -moz-appearance: none !important;
   resize:both;
}
/* vertical or horizontal */
scrollbar[orient="vertical"] {
    color:silver;
}

überprüfen Sie http://codemug.com/html/custom-scrollbars-using-css/ für Details.

0
ipirlo
@-moz-document url-prefix(http://),url-prefix(https://) {
    scrollbar {
       -moz-appearance: none !important;
       background: rgb(0,255,0) !important;
    }
    thumb,scrollbarbutton {
       -moz-appearance: none !important;
       background-color: rgb(0,0,255) !important;
    }

    thumb:hover,scrollbarbutton:hover {
       -moz-appearance: none !important;
       background-color: rgb(255,0,0) !important;
    }
    scrollbarbutton {
       display: none !important;
    }
    scrollbar[orient="vertical"] {
      min-width: 15px !important;
    }
}
0
ramme