Sintassi

Significato dei valori principali:

• auto: è il valore predefinito. La proprietà si adatta automaticamente alla visibilità della barra di scorrimento. Se la barra di scorrimento è necessaria, viene mostrata senza alterare il layout.

• stable: riserva sempre lo spazio per la barra di scorrimento, indipendentemente dal fatto che la barra sia visibile o meno. Il layout non cambia se la barra di scorrimento è nascosta.

• both-edges: riserva lo spazio per la barra di scorrimento su entrambi i lati del contenitore (sinistro e destro) per evitare che si verifichino problemi di layout dovuti alla presenza di barre di scorrimento in entrambi i casi.

Considerazioni:
La proprietà scrollbar-gutter è particolarmente utile quando si lavora con contenitori che devono contenere barre di scorrimento. Con il valore stable, ad esempio, puoi evitare che il contenuto si sposti ogni volta che la barra di scorrimento appare o scompare, migliorando l'affidabilità del layout.

Esempio proprietà: scrollbar-gutter

Codice Esempio: scrollbar-gutter

CODE: CSS

1. .scrollbar-gutter-example {

2.   width: 300px;

3.   height: 150px;

4.   overflow: auto;

5.   background-color: #f0f0f0;

6.   padding: 10px;

7.   scrollbar-gutter: stable; /* Riserva spazio per la barra di scorrimento */

8. }

Contenuto Esempio: scrollbar-gutter

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

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