web-dev-qa-db-fra.com

Comment afficher des barres de défilement personnalisées dans tous les navigateurs?

J'utilise un code simple pour une barre de défilement personnalisée en couleur:

<style type="text/css">  
<!--
BODY
{
    scrollbar-face-color: #000000;
    scrollbar-highlight-color: #000000;
    scrollbar-3dlight-color: #000000;
    scrollbar-darkshadow-color: #000000;
    scrollbar-shadow-color: #000000;
    scrollbar-arrow-color: #FF99FF;
    scrollbar-track-color: #FFCCFF;
}
-->
</style>

Et cela ne fonctionne pas dans Chrome, mais cela fonctionne dans IE et je ne suis pas sûr des autres navigateurs. J'utilise chrome comme navigateur principal, j'ai vu ce problème sur d'autres sites Web, mais se demandait s'il y avait un moyen de le contourner?

Il existe un moyen de créer des divs/boîtes à semi-opacité qui fonctionnent dans tous les navigateurs de nos jours avec des scripts spéciaux, alors vous vous demandez s'il y avait une solution comme celle-ci pour les barres de défilement?

Merci!

cssscrollbar
17
Farah Wahab

Voici quelques plugins qui fonctionnent pour tous les navigateurs:

  1. http://jscrollpane.kelvinluck.com/
  2. http://www.hesido.com/web.php?page=customscrollbar
  3. http://www.script-tutorials.com/custom-scrollbars-cross-browser-solution/
9
Iwo Kucharski
::-webkit-scrollbar {
    width: 15px;
    background:lightgray;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,255,1); 
    border-radius: 15px;
}

::-webkit-scrollbar-thumb {
    border-radius: 15px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    background:cyan;
}

Cela fonctionnera dans Chrome. Firefox ne prend pas en charge le style de défilement. J'espère que cela aide!

6
Shradhey Tripathi

scrollbar n'est pas une norme CSS. Dans Chrome ou Safari (WebKit), vous pouvez utiliser l'extension préfixée par -webkit-En savoir plus ici .

FireFox ne prend pas en charge le style de barre de défilement.

Vous pouvez donc probablement prendre en charge cet effet dans IE et les navigateurs WebKit uniquement, ou utiliser des bibliothèques JavaScript comme l'a dit Iwo Kucharski.

2
Agustin Meriles

Ces attributs ne fonctionneront tout simplement pas en dehors d'Internet Explorer. Ils sont une concoction Microsoft quelque peu bizarre qui n'a jamais été dans aucune norme.

Si vous voulez faire semblant, vous aurez besoin de Javascript. Je ne pense pas que le CSS pur vous donnera l'effet.

0
slezica