Sintassi

Significato dei valori principali:

• thumb-color: colore della parte mobile della scrollbar (il "manico").

• track-color: colore della traccia fissa su cui scorre il thumb.

• auto: (valore predefinito) lascia che il browser scelga lo stile e i colori predefiniti per la scrollbar.

Esempio proprietà: scrollbar-color

Codice Esempio: scrollbar-color

CODE: CSS

1. .scrollbar-color-box {

2.   width: 300px;

3.   height: 200px;

4.   overflow: auto;

5.   background-color: #282c34;

6.   color: #ffffff;

7.   padding: 15px;

8.   border-radius: 10px;

9.   scrollbar-color: #61afef #3a3f4b; /* thumb e track */

10. }

Contenuto Esempio: scrollbar-color

  
  <style>
    .scrollbar-color-box {
      width: 300px;
      height: 200px;
      overflow: auto;
      background-color: #282c34;
      color: #ffffff;
      padding: 15px;
      border-radius: 10px;
      scrollbar-color: #61afef #555555; /* colore del thumb e del track */
    }
  </style>

  <div class="scrollbar-color-box">
    Contenuto lungo da scorrere...
  </div>
  

⚠️ Nota compatibilità: scrollbar-color è attualmente supportato solo da alcuni browser, come Firefox e versioni recenti di Chromium (con supporto abilitato), quindi potrebbe non funzionare correttamente in tutte le versioni di altri browser.

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser