Internet Explorer ha introdotto le impostazioni di colore CSS per le barre di scorrimento in IE versione 5.5, ma gli stili per barre di scorrimento non è mai diventata una parte ufficiale di qualsiasi specifica CSS. Tuttavia, browser basati su WebKit, come Safari e Chrome il supporto CSS su barre di scorrimento e consentono di modificare la larghezza della barra di scorrimento. Questi browser usano gli pseudo-elementi e il prefisso "-webkit" per consentire di cambiare gli stili in una varietà di pezzi barra di scorrimento, tra cui il i tasti freccia pista e.

istruzione

1 Aprire il file del foglio di stile in Blocco note o un editor di codice. Trovare il seguente file CSS collegato alla testa del codice HTML del tuo sito web:

<Link rel = "stylesheet" href = "path / to / style.css" type = "text / css" />

Scrivere il codice CSS in fondo del foglio di stile. Se la pagina Web non utilizza fogli di stile esterni, aggiungere il CSS tra "<style>" tag nella testa del codice HTML.

2 Aggiungere queste tre regole di stile:

:: - Webkit-scrollbar {

}

:: - Webkit-scrollbar-track {

}

:: - Webkit-scrollbar-thumb {

}

Le doppie-due punti indicano pseudo-elementi CSS. Si tratta di elementi non è stato creato nel codice HTML; barre di scorrimento del browser rientrano in questa categoria.

3 Impostare la larghezza interna ":: - webkit-scrollbar {}":

:: - Webkit-scrollbar {

width: 20px;

}

L'impostazione di questa proprietà da sola non crea una barra di scorrimento che lavora in Safari o Chrome, perché entrambi i browser disattivare tutti gli stili barra di scorrimento quando si imposta qualsiasi proprietà utilizzando la barra di scorrimento pseudo-elementi, così si finisce con un vuoto, barra di scorrimento invisibile.

4 Dare la barra di scorrimento traccia un colore di sfondo:

:: - Webkit-scrollbar-track {

sfondo: #eee;

}

5 Aggiungere un colore di sfondo per pezzo "pollice" della barra di scorrimento:

:: - Webkit-scrollbar-thumb {

background: # 000;

}

Il pezzo del pollice è la parte della barra di scorrimento che l'utente può fare clic e trascinare per scorrere verso l'alto o verso il basso.

Consigli e avvertenze

• Aggiungere "border-radius" a pezzi barra di scorrimento per creare angoli arrotondati, e aggiungere "box-shadow" con il valore inserto per aggiungere profondità alla barra di scorrimento.
• Duplicare il vostro CSS barra di scorrimento e rimuovere il testo "-webkit-" da ogni regola. Se CSS per barre di scorrimento diventa una parte ufficiale delle specifiche CSS stabilito dal World Wide Web Consortium, o W3C, il codice sarà pronto per l'uso da altri browser.
• A partire dal momento della pubblicazione, i browser non Webkit come IE, Firefox e Opera non supportano CSS su barre di scorrimento.