Sintassi

Significato dei valori principali:

• auto: è il valore predefinito. La larghezza della barra di scorrimento viene determinata automaticamente dal browser in base al contenuto e alle impostazioni del sistema operativo.

• thin: imposta una barra di scorrimento più sottile, riducendo la sua larghezza rispetto alla larghezza predefinita.

• none: rimuove completamente la barra di scorrimento, sebbene la funzionalità di scorrimento resti attiva (utile per implementazioni personalizzate di scrollbar).

Considerazioni:
La proprietà scrollbar-width è ideale per modificare la larghezza delle barre di scorrimento senza dover ricorrere a soluzioni JavaScript o a personalizzazioni avanzate. La possibilità di scegliere tra thin e none permette di migliorare l'aspetto e l'esperienza utente, soprattutto su dispositivi con layout stretti o quando si vuole ridurre l'ingombro visivo della barra di scorrimento.

Esempio proprietà: scrollbar-width

Codice Esempio: scrollbar-width

CODE: CSS

1. .scrollbar-width-example {

2.   width: 300px;

3.   height: 150px;

4.   overflow: auto;

5.   background-color: #f0f0f0;

6.   padding: 10px;

7.   scrollbar-width: thin; /* Imposta la barra di scorrimento sottile */

8. }

Contenuto Esempio: scrollbar-width

  
  <style>
    .scrollbar-width-example {
      width: 300px;
      height: 150px;
      overflow: auto; /* Consente la barra di scorrimento */
      background-color: #282c34;
      color: #ffffff;
      padding: 15px;
      border-radius: 10px;
      scrollbar-width: thin; /* Imposta la barra di scorrimento sottile */
    }
  </style>
  
  <div class="scrollbar-width-example">
      Contenuto con barra di scorrimento sottile. Aggiungi abbastanza testo per attivare lo scroll.
  </div>
  

⚠️ Nota compatibilità: scrollbar-width è 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