web-dev-qa-db-de.com

Farbwechsel der Bildlaufleiste in Firefox

Ich möchte die Farbe der Bildlaufleiste in Firefox ändern. Wie kann ich das machen?

22
XMen

Das Ändern der Bildlaufleistenfarbe in Firefox ist nicht so trivial wie in Internet Explorer und Opera. In Firefox kann nur der Stil der Bildlaufleiste vom Design festgelegt werden. Das ist eine gute Sache. Viele Benutzer mögen es nicht, wenn das Aussehen und Verhalten von Benutzeroberflächen-Widgets nach Belieben eines Designers geändert wird. Das Aussehen von Schnittstellenteilen zu ändern, kann für sehbehinderte Besucher, die ein kontrastreiches Thema verwenden, sogar noch problematischer sein.

Wenn die Bildlaufleiste jedoch in einem <div> auf Ihrer Seite enthalten ist, können Sie eine benutzerdefinierte Bildlaufleiste erstellen und diese mit JavaScript funktionsfähig machen. Dieses jQuery-Plugin sieht so aus, als würde es den Trick ziemlich gut machen: http://jscrollpane.kelvinluck.com/

Ich denke, das ist mehr oder weniger das, was Sie tun wollen: http://martinsmucker.com/demo/scroller.html

So funktioniert das:

Im <head> des Dokuments müssen wir auf mehrere Stylesheets und Skripts verweisen (die Sie wahrscheinlich bereits von http://jscrollpane.kelvinluck.com/ heruntergeladen haben.

Hier passiert eine große Mehrheit der Magie:

<!-- Styles -->
<link rel="stylesheet" type="text/css" href="jquery.jscrollpane.css" />
<style type="text/css">
    html, body {
        height: 100%;
        margin: 0;
        padding:0;
    }
    #container {
        height:100%;
        width:100%;
        margin: 0;
        padding:0;
        overflow: auto;
    }
</style>

<!-- Scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.scroll-pane').jScrollPane();
    });
</script>

Dies setzt voraus, dass sich die css- und js-Dateien im selben Verzeichnis wie Ihre html-Datei befinden. Wir beginnen mit einem Link auf das bereitgestellte Stylesheet.

Fügen Sie dann ein wenig CSS hinzu, um zu verhindern, dass die normalen Bildlaufleisten angezeigt werden. Setzen Sie margin und padding von HTML und Body auf 0 und setzen Sie die height auf 100%. Alle unsere Inhalte werden in ein Div mit der ID "Container" verpackt. Dieser Container füllt die Seite genau (Höhe: 100%; Breite: 100%;) und stiehlt den Bildlauf, sodass wir die Bildlaufleiste (overflow: auto;) anpassen können.

Dann verweisen wir auf alle entsprechenden Skripte. Hier verwende ich die von Google gehostete Kopie von jQuery, und wieder gehe ich davon aus, dass sich alle lokalen Skripts im selben Verzeichnis wie die HTML-Datei befinden. Das letzte bisschen Jquery findet alle Divs mit der Klasse "Bildlauffenster" und fügt ihnen die entsprechenden Elemente und Bildlauffunktionen hinzu.

Das HTML ist dann sehr einfach. 

<body>
    <div class="scroll-pane" id="container">
    All of your content for the page goes here.
    </div>
</body>

Wenn Sie alles richtig gemacht haben, sollte Ihre Seite wie mein Beispiel aussehen.

Chrome und Safari unterstützen die Farbgebung der Bildlaufleisten. Fügen Sie den folgenden Code in Ihre CSS ein und sehen Sie, wie die Magie geschieht:

::-webkit-scrollbar {
  height: 12px;
  width: 12px;
  background: #969696;
  -webkit-border-radius: 1ex;
}

::-webkit-scrollbar-thumb {
  background: #2B2B2B;
  -webkit-border-radius: 1ex;
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}

::-webkit-scrollbar-corner {
  background: #1A1A1A;
}

Das einzige, was fehlt, ist, dass Firefox diese Funktion unterstützt.

7
Sander

Es ist nicht direkt über CSS möglich.

Wenn Sie jedoch jQuery verwenden können, kann jscrollpane Ihnen helfen.

3
Nivas

du kannst nicht Wie Sie sehen, hier , ist dies nur für IE5 + und Opera7.2 + möglich.

EDIT: Mit etwas Javascript kann es möglich sein, eigene "html-scrollbars" zu erstellen, die so gestaltet sein könnten, wie Sie sie wollen - aber ich denke nicht, dass Sie dies tun sollten .

2
oezi

Seit Version 64 erlaubt Firefox ein eingeschränktes Styling der Bildlaufleisten:

.my-scrollable {
   scrollbar-color: red blue;
   scrollbar-width: thin;
}

Siehe https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color

0
salomvary

Soweit ich weiß, ist dies nicht wirklich nützlich, aber es ist erwähnenswert, dass das Attribut, das steuert, ob in Firefox Bildlaufleisten angezeigt werden, Folgendes ist: ( reference link )

Attribute....scrollbars
Type.........nsIDOMBarProp
Description..The object that controls whether or not scrollbars 
             are shown in the window. This attribute is "replaceable" 
             in JavaScript. Read only

Firefox verfügt außerdem über die folgenden herstellerspezifischen Eigenschaften:

Überlauf: -moz-scrollbars-none

andere gültige Werte sind -moz-scrollbars-horizontal und -moz-scrollbars-vertical. 

0
davidcondrey

für Firefox oder Cross-Browser können Sie Folgendes verwenden: jQuery benutzerdefinierten Content-Scroller

einfacher und benutzerfreundlicher

hier ein Beispiel, das ich in Magento implementiere und auf Firefox, Opera, Chrome und Safari getestet habe: http://i.stack.imgur.com/wnRCL.png

0
Andhi Irawan