La scrollbar-gutterproprietà fornisce flessibilità per determinare come lo spazio utilizzato dal browser per visualizzare una barra di scorrimento che interagisce con il contenuto sullo schermo. Le specifiche lo descrivono "riservando spazio per la barra di scorrimento" e questo ha senso poiché questo è ciò che in definitiva è un gutter: un contenitore che riserva spazio per tutto ciò che è in esso e lo separa da altri elementi.
Quindi siamo tutti sulla stessa pagina, una barra di scorrimento è quella cosa tipicamente sul lato destro del browser (formalmente indicato come "agente utente" - o UA - nelle specifiche) che indica la posizione di scorrimento rispetto al totale spazio disponibile nella pagina web.
Quelli sono stati tradizionalmente un contenitore visivo con un indicatore scorrevole. Queste vengono chiamate barre di scorrimento classiche . L'indicatore si trova all'interno della grondaia e la grondaia occupa lo spazio fisico sullo schermo quando viene visualizzato.
Ultimamente, tuttavia, l'aspetto della barra di scorrimento è andato verso qualcosa di molto più minimale. Chiamiamo quelle barre di scorrimento sovrapposte e sono parzialmente o completamente trasparenti mentre si trovano in cima al contenuto della pagina. In altre parole, a differenza delle classiche barre di scorrimento che occupano spazio fisico sullo schermo, le barre di scorrimento sovrapposte si trovano sopra il contenuto dello schermo.
Già che ci siamo, una barra di scorrimento può apparire in altri posti. Oltre a stare a filo a destra del browser, vedremo barre di scorrimento sugli elementi HTML in cui il contenuto supera l'elemento e la overflowproprietà (o overflow-xe overflow-y) è impostata sul scrollvalore. E nota che l'esistenza di overflow-xmezzi che abbiamo lo scorrimento orizzontale oltre allo scorrimento verticale.
È di questo che stiamo parlando. Non l'indicatore stesso, ma il contenitore che lo contiene. Questa è la grondaia. Se un browser utilizza una barra di scorrimento classica o sovrapposta dipende totalmente dall'UA stessa. Non sta a noi decidere. Questo è vero per la larghezza della barra di scorrimento. Il programma utente lo definisce e non ci dà alcun controllo su di esso.
È qui che scrollbar-gutterentra in gioco. Possiamo precisare se la grondaia è presente nelle sue varianti classiche e sovrapposte.
Sintassi
.my-element ( scrollbar-gutter: ( auto | ( stable | always ) && both? && force? ) )Una doppia e commerciale (&&) separa due o più componenti, che devono essere tutte presenti, in qualsiasi ordine.
Un punto interrogativo (?) Indica che il tipo, la parola o il gruppo precedente è facoltativo (ricorre zero o una volta).
Valori
auto(valore iniziale): più o meno il comportamento predefinito descritto finora. L'impostazione della proprietà su questo valore consente alle barre di scorrimento classiche di utilizzare lo spazio disponibile nell'interfaccia utente sugli elementi in cui laoverflowproprietà di tali elementi è impostata suscrolloauto. Al contrario, le barre di scorrimento sovrapposte non occupano alcuno spazio sedendosi sopra l'elemento.stable: Questo aggiunge un comportamento un po 'supponente riservando sempre spazio per la grondaia della barra di scorrimento, a condizione che laoverflowproprietà sullo stesso elemento sia impostata suscrolloautoe abbiamo a che fare con una barra di scorrimento classica, anche se la casella non è traboccante. Al contrario, questo non avrà alcun impatto su una barra di scorrimento in overlay.always: Funziona allo stesso modostablema garantisce che lo spazio per la grondaia della barra di scorrimento sia sempre riservato, indipendentemente dal fatto che la barra di scorrimento sia classica o sovrapposta e indipendentemente dal fatto che il contenuto sia traboccante o meno.both: Indica che un margine interno della barra di scorrimento verrà posizionato su entrambi i lati dell'elemento quando viene visualizzato il margine interno predefinito. Puoi vedere come questo potrebbe tornare utile se il tuo progetto richiede una spaziatura uguale su entrambi i lati dell'elemento.force: Questo è lo stesso come applicabile siastableealwaysdove l'elemento dioverflowè impostatoauto,scroll,visible,hiddenoclip.
La bozza di lavoro delle specifiche ha una tabella super pratica che suddivide queste definizioni nei rispettivi contesti per mostrare la relazione che hanno con le barre di scorrimento classiche e sovrapposte.
| Barre di scorrimento classiche | Barre di scorrimento sovrapposte | ||||
|---|---|---|---|---|---|
| trabocco | scrollbar-grondaia | Traboccante | Non traboccante | Traboccante | Non traboccante |
| scorrere | auto | G | G | ||
| stabile | GM | G | |||
| sempre | G | G | G | G | |
| auto | G | ||||
| stabile | G | G | |||
| sempre | G | G | G | G | |
| visibile, nascosto, clip | auto | ||||
| stabile | f? | f? | |||
| sempre | f? | f? | f? | f? | |
"G" rappresenta i casi in cui lo spazio è riservato per il margine interno della barra di scorrimento, "f?" casi in cui lo spazio è riservato per il margine interno della barra di scorrimento se è stata specificata la forza e casi di celle vuote in cui lo spazio vuoto è riservato.
Stato delle specifiche
La scrollbar-gutterproprietà è definita nel livello 4 del modulo di overflow, che è nello stato di bozza di lavoro. Ciò significa che questo è ancora un lavoro in corso e potrebbe cambiare da ora fino al momento in cui la bozza passerà alla Raccomandazione candidata.
anche la specifica Overflow Module Level 3 è una Working Draft, quindi è una buona indicazione che (1) ci vorrà del tempo prima scrollbar-gutterche diventi una raccomandazione e (2) è ancora molto in corso.
Supporto browser
Non c'è supporto per il browser al momento dell'ultimo aggiornamento.
Maggiori informazioni
- Modulo CSS Overflow Livello 4 Bozza di lavoro
- GitHub problema n. 92
- Il gruppo di lavoro CSS al TPAC: cosa c'è di nuovo nei CSS? Inclusa una proposta disegnata a mano per la tabella che delinea il comportamento dei valori delle proprietà.