Barra di scorrimento - Trucchi CSS

Una breve storia dello stile delle barre di scorrimento:

Una volta era una cosa che solo Internet Explorer poteva fare (versioni antiche) con cose come -ms-scrollbar-base-color. Questi non esistono più.
Poi i motori di browser basati su WebKit si sono messi d'accordo con cose come ::-webkit-scrollbar. Questo è ciò che copre principalmente questa voce di Alamanac, poiché oggi funziona in tutto il panorama Safari / Chrome.
Gli standard sono finalmente entrati in gioco e quelle opzioni di stile sono coperte da proprietà senza prefisso come scrollbar-color e scrollbar-width.

Lo stile delle barre di scorrimento per il mondo Safari / Chrome è esposto dietro il -webkitprefisso del fornitore.

Questa voce di almanacco è una panoramica, per un'analisi più completa del lavoro con le barre di scorrimento personalizzate, leggi questo articolo CSS-Tricks.

body::-webkit-scrollbar ( width: 1em; ) body::-webkit-scrollbar-track ( box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); ) body::-webkit-scrollbar-thumb ( background-color: darkgrey; outline: 1px solid slategrey; )

La -webkit-scrollbarfamiglia di proprietà è composta da sette diversi pseudo-elementi che, insieme, costituiscono un elemento dell'interfaccia utente della barra di scorrimento completa:

::-webkit-scrollbaraffronta lo sfondo del bar stesso. Di solito è coperto dagli altri elementi
::-webkit-scrollbar-button indirizza i pulsanti direzionali sulla barra di scorrimento
::-webkit-scrollbar-track indirizza lo spazio vuoto “sotto” la barra di avanzamento
::-webkit-scrollbar-track-piece è il livello più in alto della barra di avanzamento non coperto dall'elemento di scorrimento trascinabile (pollice)
::-webkit-scrollbar-thumb risolve l'elemento di scorrimento trascinabile che si ridimensiona a seconda delle dimensioni dell'elemento scorrevole
::-webkit-scrollbar-corner indirizza l'angolo inferiore (solitamente) dell'elemento scorrevole, dove potrebbero incontrarsi due barre di scorrimento
::-webkit-resizerrisolve il quadratino di ridimensionamento trascinabile che appare sopra l' scrollbar-cornerangolo inferiore di alcuni elementi

Oltre a questi pseudo-elementi, ci sono anche undici classi di pseudo-selettori che non sono richiesti ma forniscono ai progettisti il potere di definire vari stati e interazioni dell'interfaccia utente della barra di scorrimento. Un'analisi completa di questi pseudo-selettori e un esempio dettagliato possono essere trovati in questo articolo CSS-Tricks.

Dai un'occhiata a questa penna!

Punti di interesse

Se non è presente alcun selettore di qualificazione che precede i vari pseudo-elementi, gli stili verranno applicati a qualsiasi barra di scorrimento che può apparire sulla pagina.
L'impostazione degli -webkit-scrollbarstili è un buon modo per forzare la tua pagina web a mostrare barre di scorrimento orizzontali o verticali sulle versioni di Mac OS più recenti di Lion, sulle quali le barre di scorrimento sono solitamente nascoste per impostazione predefinita.
Poiché questa proprietà è dietro un -webkitprefisso del fornitore, diversi plugin jQuery sono stati scritti in "polyfill" o estendono questa funzionalità ad altri browser. Uno di questi plugin è jScrollPane.

Supporto browser

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.