web-dev-qa-db-fra.com

Style de barre de défilement CSS Cross browser

Comment définir un navigateur croisé de style barre de défilement CSS? J'ai testé ce code, il ne fonctionne que dans IE et opera, mais a échoué dans Chrome, Safari et Firefox.

<style type="text/css">
<!--    
body {
    scrollbar-face-color: #000000;
    scrollbar-shadow-color: #2D2C4D;
    scrollbar-highlight-color:#7D7E94;
    scrollbar-3dlight-color: #7D7E94;
    scrollbar-darkshadow-color: #2D2C4D;
    scrollbar-track-color: #7D7E94;
    scrollbar-arrow-color: #C1C1D1;
}
-->
</style>
cssscrollbar
157
yuli chika

Les styles CSS à barres de défilement sont une curiosité inventée par les développeurs Microsoft. Ils ne font pas partie de la norme W3C pour CSS et, par conséquent, la plupart des navigateurs les ignorent.

114
Till Helge

Webkit supporte les barres de défilement est assez sophistiqué . Ce CSS donne une barre de défilement très minimale, avec une piste gris clair et un pouce plus foncé:

::-webkit-scrollbar
{
  width: 12px;  /* for vertical scrollbars */
  height: 12px; /* for horizontal scrollbars */
}

::-webkit-scrollbar-track
{
  background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb
{
  background: rgba(0, 0, 0, 0.5);
}

Cette réponse est une source fantastique d'informations supplémentaires.

145
Drew Noakes

jScrollPane est une bonne solution pour traverser les barres de défilement du navigateur et se dégrader agréablement.

31
Hussein

nanoScrollerJS est simplement à utiliser. Je les utilise toujours ...

Compatibilité du navigateur:
  • IE7 +
  • Firefox 3+
  • Chrome
  • Safari 4+
  • Opera 11.60+
Les navigateurs mobiles prennent en charge:
  • iOS 5+ (iPhone, iPad et iPod Touch)
  • iOS 4 (avec un polyfill)
  • Android Firefox
  • Navigateur natif Android 2.2/2.3 (avec un polyfill)
  • Android Opera 11.6 (avec un remplissage multiple)

Exemple de code de la documentation,

  1. Balisage - Le type de structure de balisage suivant est nécessaire pour que le plug-in fonctionne.

    ... content ici ...
12
Footniko

En tant que IE6, je pense que vous ne pouvez pas personnaliser la barre de défilement avec ces propriétés. L'article de Chris Coyier lié à ce qui précède est détaillé dans Nice en ce qui concerne les options de css webkit propriétaire pour la personnalisation de la barre de défilement.

Si vous voulez vraiment une solution multi-navigateurs que vous pouvez entièrement personnaliser, vous devrez utiliser certains JS. Voici un lien vers un plugin Nice pour cela appelé FaceScroll: http://www.dynamicdrive.com/dynamicindex11/facescroll/index.htm

1
DMTintner

essayez-le, il est très facile à utiliser et à tester sur IE, Safari et FF. Il fonctionne bien et vous n'avez pas besoin de beaucoup de div, ajoutez-y simplement id et tout fonctionnera correctement après avoir lié les fichiers Js et Css. barre de défilement personnalisée FaceScroll

j'espère que ça aide

Modifier Étape 1: Ajoutez le script ci-dessous à la section de votre page:

<link href="general.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>

<script type="text/javascript" src="facescroll.js"></script>
<script type="text/javascript">
    jQuery(function(){ // on page DOM load
        $('#demo1').alternateScroll();
        $('#demo2').alternateScroll({ 'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });  
    })
</script>

Étape 2: Ensuite, dans le CORPS de votre page, ajoutez le bloc de code HTML ci-dessous à votre page.

<p><b>Scrollbar (default style) shows onMouseover</b></p>

<div id="demo1" style="width:300px; height:250px; padding:8px; background:lightyellow; border:1px solid gray; resize:both; overflow:scroll">

From Wikipedia- Gunpowder, also known since in the late 19th century as black powder, was the first chemical explosive and the only one known until the mid 1800s.[2] It is a mixture of sulfur, charcoal, and potassium nitrate (saltpeter) - with the sulfur and charcoal acting as fuels, while the saltpeter works as an oxidizer.[3] Because of its 
</div>

<br />

<p><b>Scrollbar (alternate style), always shown</b></p>

<div id="demo2" style="width:400px; height:130px; padding:10px; padding-right:8px; background:lightyellow; border:1px solid gray; overflow:scroll; resize:both;">

From Wikipedia- Gunpowder, also known since in the late 19th century as black powder, was the first chemical explosive and the only one known until the mid 1800s.[2] It is a mixture of sulfur, charcoal, and potassium nitrate (saltpeter) - with the sulfur and charcoal acting as fuels, while the saltpeter works as an oxidizer.[3] Because of its 
</div>
0
Yousef Altaf