web-dev-qa-db-fra.com

Comment faire une barre de défilement personnalisée dans IE?

J'ai cette belle barre de défilement qui fonctionne dans Chrome ainsi que dans les dernières versions de Safari. Est-il possible de créer le même type de barre de défilement pour IE9 + en utilisant du CSS pur?

CSS:

.scrollbar
{
    float: left;
    height: 300px;
    background: #F5F5F5;
    overflow-y: scroll;
    margin-bottom: 25px;
}

.scrollbar-active
{
    min-height: 450px;
}

#scroll::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

#scroll::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#scroll::-webkit-scrollbar-thumb
{
    background-color: #000000;
    border: 2px solid #555555;
}

HTML:

<div class="scrollbar" id="scroll">
    <div class="scrollbar-active"></div>
</div>

DÉMO: https://jsfiddle.net/7gmut6w3/2/

htmlcsscss3google-chromeinternet-explorer
17
Prime

Ce sont les propriétés CSS que vous pouvez utiliser pour ajuster le style des barres de défilement IE:

body{
  scrollbar-base-color: #000;
  scrollbar-face-color: #000;
  scrollbar-3dlight-color: #000;
  scrollbar-highlight-color: #000;
  scrollbar-track-color: #000;
  scrollbar-arrow-color: black;
  scrollbar-shadow-color: #000;
  scrollbar-dark-shadow-color: #000;
}

Plus d'informations peuvent être trouvées ici .

Word OF CAUTION - L'ajustement d'un élément natif d'un navigateur Web (comme une barre de défilement) peut introduire toutes sortes de cas Edge étranges et de problèmes d'expérience utilisateur. Soyez prudent avec tous les ajustements que vous apportez, en vous assurant que l'avantage supplémentaire des barres de défilement personnalisées l'emporte sur les problèmes qu'il présentera.

32
Ben Rondeau

si vous définissez tous les éléments de la zone supérieure sur la même couleur que la piste, cela masquera - en substance - la flèche, mais l'espace restera là.

scrollbar-track-color:  #AAA;
scrollbar-3dlight-color:  #AAA;
scrollbar-darkshadow-color:  #AAA;
scrollbar-arrow-color:  #AAA;

maintenant si seulement vous pouviez ajuster la largeur pour rendre la barre de défilement plus étroite !! quelqu'un a compris celui-ci?

5
Judy Engelsman

Je suis allé plus loin et j'ai créé une solution pure uniquement CSS qui fournit non seulement une barre de défilement personnalisée pour IE mais aussi une barre de défilement transparente personnalisée qui fonctionne dans TOUS LES NAVIGATEURS donnant le même aspect et la même sensation à chacun d'eux.

Description: Il utilise sélecteur css de barre de défilement webkit pour Chrome Safari et Opera, les deux (très anciens) propriétés de barre de défilement simples pour firefox ( introduit dans la version 64), et une astuce de requête multimédia pour cibler ie (10, 11) et Edge afin de fournir un comportement de mélange qui déplace et masque une partie de la largeur de la barre de défilement, en haut et en bas pour donner le même aspect que dans l'autre navigateurs.

Remarque: À ce stade, vous ne pouvez pas fournir un style CSS standard pour la barre de défilement sur Microsoft Edge (ou couleurs), mais il a beaucoup de votes et vous pouvez voter pour cette exigence également .

.scrollable {
  background-color: #a3d5d3;
  height: 100%;
  overflow-y: auto;
}

.scrollable-container {
  background-color: #a3d5d3;
  width: 240px;
  height: 160px;
  position: relative;
  overflow: hidden;
  margin: auto;
  margin-top: 16px;
}

.scrollable div {
  font-size: 23px;
  
}

/*IE*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.scrollable {
        margin-right: -10px;
        padding-top: 32px;
        margin-top: -32px;
        margin-bottom: -32px;
        padding-bottom: 32px;

        /* ie scrollbar color properties */
        scrollbar-base-color: #efefef;
        scrollbar-face-color: #666666;
        scrollbar-3dlight-color: #666666;
        scrollbar-highlight-color: #666666;
        scrollbar-track-color: #efefef;
        scrollbar-arrow-color: #666666;
        scrollbar-shadow-color: #666666;
        scrollbar-dark-shadow-color: #666666;
  }
  
      .scrollable:after {
        content: "";
        height: 32px;
        display: block;
    }
    
}

/*Edge*/
@supports (-ms-ime-align:auto)  {
.scrollable {
        margin-right: -10px;
        padding-top: 16px;
        margin-top: -16px;
        margin-bottom: -16px;
        padding-bottom: 16px;
}
  
.scrollable:after {
    content: "";
    height: 16px;
    display: block;
}
}

/*Firefox*/
/*From version 64 - https://drafts.csswg.org/css-scrollbars-1/*/
.scrollable {
    scrollbar-width: thin;
    scrollbar-color: #666666 #efefef;
}


/*Chrome*/
.scrollable::-webkit-scrollbar-track {
    background-color: #efefef;
    width: 4px;
}

.scrollable::-webkit-scrollbar-thumb {
    background-color: #666666;
    border: 1px solid transparent;
    background-clip: content-box;
}

.scrollable::-webkit-scrollbar {
    width: 8px;
}
<div class="scrollable-container">
  <div class="scrollable">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
    <div>Element 6</div>
    <div>Element 7</div>
    <div>Element 8</div>
    <div>Element 9</div>
  </div>
</div>
2
Alejandro Lasebnik