web-dev-qa-db-fra.com

Changement de couleur de la barre de défilement dans Firefox

Je veux changer la couleur de la barre de défilement dans Firefox. Comment puis je faire ça?

cssfirefoxscrollscrollbar
22
XMen

Changer la couleur de la barre de défilement dans Firefox n’est pas aussi trivial que dans Internet Explorer et Opera. Firefox permet uniquement de définir le style de la barre de défilement par le thème. C'est une bonne chose. De nombreux utilisateurs n'aiment pas avoir l'apparence des widgets d'interface modifiés de manière aléatoire, à la discrétion d'un concepteur. Changer l'apparence des éléments d'interface peut être encore plus un problème pour les visiteurs malvoyants qui utilisent peut-être un thème à contraste élevé.

Cela dit, si la barre de défilement est contenue dans un <div> de votre page, vous pouvez créer une barre de défilement personnalisée et la rendre fonctionnelle à l'aide de JavaScript. Ce plugin jQuery semble faire très bien l'affaire: http://jscrollpane.kelvinluck.com/

Je pense que c’est plus ou moins ce que vous voulez faire: http://martinsmucker.com/demo/scroller.html

Voici comment ça fonctionne:

Dans le <head> du document, nous devons faire référence à plusieurs feuilles de style et scripts (que vous avez probablement déjà téléchargés depuis http://jscrollpane.kelvinluck.com/ .

C’est là que se déroule une grande majorité de la 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>

Cela suppose que les fichiers css et js sont situés dans le même répertoire que votre fichier html. Nous commençons par créer un lien vers la feuille de style fournie.

Ajoutez ensuite un peu de CSS pour empêcher l’affichage des barres de défilement normales. Définissez les margin et padding de html et body à 0, et définissez la height à 100%. Tout notre contenu sera emballé dans une div avec un identifiant de "conteneur". Ce conteneur remplit exactement la page (hauteur: 100%; largeur: 100%;) et vole le défilement afin que nous puissions personnaliser la barre de défilement (overflow: auto;).

Ensuite, nous référençons tous les scripts appropriés. Ici, j'utilise la copie de jQuery hébergée par Google et, encore une fois, je suppose que tous les scripts locaux se trouvent dans le même répertoire que le fichier html. Le dernier petit morceau de jquery trouve tous les divs avec la classe "scroll-pane" et ajoute les éléments appropriés et la fonctionnalité de défilement à ceux-ci.

Le html est alors très simple. 

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

Si vous avez tout fait correctement, votre page devrait ressembler à mon exemple.

13
Michael Martin-Smucker

Chrome et Safari prennent en charge la coloration des barres de défilement. Placez le code suivant dans votre css et constatez que la magie se produit:

::-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;
}

La seule chose qui manque est que firefox prenne en charge cette fonctionnalité.

7
Sander

Ce n'est pas possible directement via CSS.

Mais si vous pouvez utiliser jQuery, jscrollpane peut vous aider.

3
Nivas

vous ne pouvez pas. comme vous pouvez le constater ici , cela n’est possible que pour IE5 + et Opera7.2 +.

EDIT: avec un peu de javascript, il pourrait être possible de créer votre propre "barre de défilement HTML" qui pourrait être stylée comme vous le souhaitez - mais je ne pense pas que vous devriez le faire, en écrivant ceci juste pour être détaillé .

2
oezi

Depuis la version 64, Firefox autorise un style limité pour les barres de défilement:

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

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

0
salomvary

Pour autant que je sache, ceci n’est pas vraiment utile, mais il convient de noter que l’attribut qui contrôle si les barres de défilement sont affichées dans Firefox est: ( lien de référence )

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 possède également les propriétés spécifiques suivantes du fournisseur:

débordement: -moz-scrollbars-none

les autres valeurs valides sont -moz-scrollbars-horizontal et -moz-scrollbars-vertical. 

0
davidcondrey

pour Firefox ou navigateur croisé, vous pouvez utiliser: Scroller de contenu personnalisé jQuery

plus simple et facile à utiliser

voici un exemple que je mets en œuvre dans magento et testé sur firefox, opera, chrome et safari: http://i.stack.imgur.com/wnRCL.png

0
Andhi Irawan