Nwlapcug.com


Come fare una barra di scorrimento espandere in larghezza con i CSS

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

Istruzioni

1

Aprire il file di foglio di stile in blocco note o un editor di codice. Individuare 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 nella parte inferiore del foglio di stile. Se la pagina Web non utilizza fogli di stile esterni, aggiungere il codice CSS tra i tag di "stile < >" nella sezione head del codice HTML.

2

Aggiungere queste regole di tre stile:

:: - webkit - scrollbar {

}

:: - webkit - scrollbar-traccia () {

}

:: - webkit - scrollbar-pollice () {

}

I doppio-i due punti indicano pseudo-elementi in CSS. Si tratta di elementi che non è stato creato nel codice HTML; le barre di scorrimento browser rientrano in questa categoria.

3

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

:: - webkit - scrollbar {

Larghezza: 20px;

}

L'impostazione di questa proprietà da solo non crea una barra di scorrimento di lavoro in Safari o Chrome perché entrambi i browser disattivare tutti gli stili di barra di scorrimento quando si imposta una proprietà utilizzando il barra di scorrimento pseudo-elementi, così si finisce con una barra di scorrimento in bianco, invisibile.

4

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

:: - webkit - scrollbar-traccia () {

Priorità bassa: #eee;

}

5

Aggiungere un colore di sfondo al pezzo "pollice" di barra di scorrimento:

:: - webkit - scrollbar-pollice () {

background: #000;

}

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

Consigli & Avvertenze

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