Share
Questo suggerimento ti guiderà nel migliorare l'aspetto delle barre di scorrimento per adattarle al tuo design dell'interfaccia utente. Daremo un'occhiata a ciò che i browser WebKit ci offrono in termini di CSS, inoltre useremo un fallback jQuery per soddisfare altri browser.
Se hai bisogno di aiuto con lo styling di un particolare componente del tuo sito web, può essere più veloce ottenere aiuto da un professionista. Envato ha esperti pronti ad aiutare con il re-styling o la personalizzazione di tutti i tipi di componenti web.
Quando ci riferiamo ai browser basati su Webkit stiamo essenzialmente parlando di Apple Safari e Google Chrome. Insieme, attualmente detengono oltre il 40% del mercato globale dei browser desktop. Per i tablet, l'iPad di Apple utilizzerà sempre Webkit a prescindere dal browser aziendale utilizzato. Google ha anche aggiunto Chrome al suo sistema operativo Android e i Chromebook sono ovviamente basati su Google Chrome.
Guardando queste cifre ci dovrebbe essere un futuro molto luminoso per lo stile della barra di scorrimento!
Prima di iniziare con il tema attuale delle barre di scorrimento dello stile con CSS, abbiamo bisogno di una demo funzionale; una pagina con barre di scorrimento. Le barre di scorrimento possono essere viste se:
Accentsconagua
textarea contiene abbastanza testo in modo da far apparire le barre di scorrimento.iframe è usato per visualizzare una pagina diversa.div o qualsiasi altro elemento del blocco ha il suo straripamento insieme di proprietà.Per il bene di questa demo andremo con l'ultima opzione. Ecco il mio markup iniziale:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus tortor eget orci fringilla non sempre magna aliquet. Aliquam convallis elit sem. Proin fringilla fermentum pretium. Phasellus id nisl eu eros convallis eleifend. In hac habitasse platea dictumst. In at felis massa. Mecenate vitae quam non elit porta pellentesque ac in erat. Nullam a ante felis, ullamcorper suscipit felis. Mecenate siedono amet nisl mattis ipsum ullamcorper aliquam vitae sed sapien. Classe aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Sed sedus dolor, non lobortis felis. Classe aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eget nisl viverra risus feugiat vulputate tempus et leo. Nam metus nibh, tristique non sodales non, interdum et neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperuliet aliquet vestibulum. Curabitur viverra tortor augue, un aliquero tellus. Vivamus eu felis vel lorem tincidunt imperdiet. Fusce iaculis luctus convallis. Proin adipiscing maschiuada enim, et feugiat tortor sagittis eu. Cras convallis felis eu leo tempus et fermentum urna accumsan. In quis metus a metus ultricies fringilla. Mecenate sed lacus aliquam nibh sempre dignissim et quis est.
Amabili sodales, sapien sit amet congue egestas, sem ligula ornare massa, vitae suscipit felis ligula quis velit. Phasellus lectus massa, sodales ac vulputate ac, pharetra quis lacus. Morbi tempus pretium nisi sed pretium. Pellentesque dictum volutpat vulputate. Fusce dapibus sagittis felis, ut consequat nisi posuere id. Cras elit orci, vehicula in sagittis a, faucibus vitae dui. Nunc non lorem in metu adipiscing adipiscing non a sapien. Sed dictum ultrices nibh in tristique. Nulla dapibus laoreet tincidunt. Sed accumsan erat quis mi luctus porta.
Sed mollis justo enim, ut pharetra nunc. Fusce vehicula viverra magna, et fringilla lectus porta quis. Donec eu fermentum mi. Donec congue pellentesque iaculis. Phasellus est leo, cursus eget consectetur in, tristique sit amet tortor. Cras eleifend felis sit amet eros vehicula aliquet. Pellentesque fringilla metus in libero luctus eu condimentum nulla pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consequat sodales lorem, nec dignissim turpis pharetra et. Nullam commodo hendrerit elementum. Donec porta faucibus ligula non blandit. In ultrices vehicula pretium.
Sed ac sagittis sapien. Curabitur varius pellentesque nunc eget molestie. Vivamus in massa arcu, ut auctor tellus. Aliquam convallis lobortis magna, ut posuere odio euismod ac. Vestibulum in enim vitae metus vulputate interdum. Mauris a risus auctor nunc fermentum dapibus. Proi iaculis, nunc ut viverra varius, augue augusto porta libero, id viverra nisl elit in mauris. Quis aenean risus ante. Donec bibendum erat un sem vestibulum eu aliquet lectus tincidunt. Vivamus imperdiet congue leo, non ultricies urna sodales sed. Abitante di Pellentes morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla vitae rhoncus dui. Nunc in nisi in ante imperdiet tincidunt sagittis eu ipsum. Aenean orci justo, faucibus placerat tincidunt vitae, vehicula a libero.
È solo un div con un sacco di contenuti fittizi. Ed ecco il CSS iniziale, che imposta alcune dimensioni fisse e attiva sia barre di scorrimento orizzontali che verticali:
.container width: 400px; altezza: 300 px; background-color: #DCDCDC; overflow: scroll; / * mostra barre di scorrimento * /
Dovresti essere in grado di vedere qualcosa di simile a questo:
Qualche tempo fa (diversi anni) gli CSS Pseudo Elements sono stati introdotti nei browser Webkit per identificare le barre di scorrimento, offrendo l'opportunità di modellare la pagina in base al tema.
Disegniamo qualcosa, usando il -webkit- prefisso e proprietà personalizzate della barra di scorrimento di Webkit. Tieni presente che mi sto attenendo solo alle proprietà CSS di base per la facilità di comprensione, con spiegazioni nei commenti.
:: - webkit-scrollbar width: 15px; / * questo ha come target la barra di scorrimento predefinita (obbligatoria) * /
Quando questo pseudoelemento è presente, WebKit disattiverà il rendering della barra di scorrimento integrato e utilizzerà semplicemente le informazioni fornite in CSS. - Surfin 'Safari
E ora per alcuni degli altri pseudo-elementi:
:: - webkit-scrollbar-track background-color: # b46868; / * la nuova barra di scorrimento avrà un aspetto piatto con il colore di sfondo impostato * / :: - webkit-scrollbar-thumb background-color: rgba (0, 0, 0, 0.2); / * questo influenzerà il pollice, ignorando la traccia * / :: - webkit-scrollbar-button background-color: # 7c2929; / * opzionalmente, puoi definire i pulsanti in alto e in basso (sinistra e destra per le barre orizzontali) * / :: - webkit-scrollbar-corner background-color: black; / * se compaiono sia la barra verticale che quella orizzontale, allora forse anche l'angolo in basso a destra deve essere disegnato * /
Dopo aver aggiunto questo CSS dovresti essere in grado di vedere il seguente effetto (di nuovo, solo i browser Webkit).
Esatto, infatti IE è stato il primo browser a supportare lo styling delle barre di scorrimento tramite CSS. Questo era ai tempi di IE 5.5, ma solo il colore può essere cambiato.
Queste proprietà possono ancora essere utilizzate oggi; dai un'occhiata a questa singola proprietà su IE 9 a scopo dimostrativo:
body scrollbar-face-color: # b46868;
Guarda come sarebbe:
Basta con WebKit. Firefox, IE e Opera possono anche unirsi al divertimento. Per loro abbiamo un approccio di fallback molto bello sotto forma di jScrollPane. Questo plugin jQuery è sviluppato da Kelvin Luck e sarà il nostro salvatore per il giorno.
Il sito Web di Kelvin ha molti buoni esempi, ma per l'utilizzo di base tutto ciò che dobbiamo fare è scaricare jQuery e i file jScrollPane e implementarli nel seguente modo:
Solo allo scopo di abbinare il nostro tema, apriamo jquery.jscrollpane.css e modifica le seguenti righe con i nostri valori di colore (per migliorare le prestazioni potresti voler posizionare tutti gli stili all'interno dei tuoi file):
.jspTrack background: # b46868; / * modificato da #dde * / position: relativo; .jspDrag background: rgba (0,0,0,0,2); / * modificato da #bbd * / position: relativo; inizio: 0; a sinistra: 0; cursore: puntatore;
Ecco uno screenshot di ciò che vedrai in Firefox:
Le app Web come Gmail e Google+ (insieme a molti altri esempi) hanno già abbracciato l'idea e se questo slancio continua, forse anche Firefox e IE forniranno le proprie soluzioni.
Spero vi sia piaciuto questo suggerimento rapido e non vedo l'ora di vedere cosa fate con le barre di scorrimento nel vostro lavoro di progettazione!
Se stai cercando una soluzione pronta, Envato Market offre una selezione di barre di scorrimento che puoi collegare al tuo sito Web per ottenere una serie di effetti. Ecco alcuni di loro:
Lazybars è un plugin jQuery per la barra di scorrimento facile da usare e modificabile. Puoi implementare queste barre di scorrimento semplicemente aggiungendo un nome di classe a qualsiasi elemento scorrevole sul tuo sito web.
Utilizza i temi che sono in bundle con Lazybars o creane di tuoi con dei semplici CSS.
Lazybars - Plug-in jQuery reattivo reattivo per la barra di scorrimento"Fancy Scrollbar - WordPress" è un plugin che può creare una barra di scorrimento personalizzata su siti WordPress. Ha un sacco di opzioni di personalizzazione. È possibile personalizzare il colore, gli effetti, il ritardo di scorrimento, la barra rotaia e molti altri parametri.
Fancy Scrollbar - WordPressAwesome Custom Scrollbar è un plugin jQuery per scrollbar personalizzato altamente personalizzabile per il tuo sito Web WordPress. Con questo plugin puoi personalizzare la tua barra di scorrimento della pagina web e puoi incorporare la barra di scorrimento personalizzata tramite shortcode ovunque desideri, anche nei file dei temi.
Impressionante barra di scorrimento personalizzataDZS Scroller fornisce una barra di scorrimento per il tuo sito che puoi personalizzare molto facilmente tramite CSS se le tre skin incluse non sono sufficienti. Inoltre è dotato di funzionalità avanzate come scorrimento per hover o dissolvenza al congedo del mouse. E funziona su iPhone / iPad.
DZS ScrollerÈ facile usare la bella e colorata barra di scorrimento CSS3 per il tuo sito web. Basta inserire nel file CSS esistente e goderti la nuova barra di scorrimento CSS3.
Stili della barra di scorrimento CSS3
