Consiglio Veloce: Modellare la Barra di Scorrimento per Abbinarla al tuo UI Design

() translation by (you can also view the original English article)

Questo suggerimento vi guiderà nel migliorare l'aspetto delle barre di scorrimento per abbinarle al tuo design UI. Daremo un'occhiata a ciò che i browser di WebKit ci offrono in termini di CSS, oltre a utilizzare una fallback di jQuery per tutti gli altri browsers.

Cerchi una Scorciatoia?

Se hai bisogno di aiuto per disegnare un particolare componente del tuo sito web, può essere più veloce chiedere aiuto ad un professionista. Envato ha esperti pronti ad aiutarti a fare un re-styling o personalizzare tutti i tipi di componenti web.

Nota veloce sui browsers

Quando ci riferiamo a browser basati su Webkit, stiamo parlando essenzialmente di Apple Safari e di Google Chrome. Insieme attualmente detengono più del 40% del mercato globale dei browser desktop. Per i tablets, l'iPad di Apple utilizzerà sempre Webkit a prescindere dal browser utilizzato. Google ha anche aggiunto Chrome al suo sistema operativo Android e i Chromebook sono naturalmente basati su Google Chrome.

Basandoci su questi dati dovrebbe esserci un futuro molto brillante per la modellazione delle barre di scorrimento!

Passo 1: una semplice pagina con barre di scorrimento

Prima di iniziare con la creazione di barre di scorrimento con CSS, abbiamo bisogno di una demo funzionale: una pagina con barre di scorrimento. Le barre di scorrimento possono essere viste se:

I contenuti sono più grandi dell'area della finestra visibile (una barra di scorrimento apparirà sulla destra).
Una textarea contiene abbastanza testo da far apparire una barra di scorrimento.
Una iframe è usata per visualizzare una pagina differente.
Un div o altri elementi hanno impostata la loro proprietà overflow

Per questa demo, useremo l'ultima opzione. Ecco il mio markup iniziale:

<div class="container">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus tortor eget orci fringilla non semper 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. Maecenas vitae quam non elit porta pellentesque ac in erat. Nullam a ante felis, ullamcorper suscipit felis. Maecenas sit amet nisl mattis ipsum ullamcorper aliquam vitae sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

    <p>Sed sed tellus dolor, non lobortis felis. Class 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 imperdiet aliquet vestibulum. Curabitur viverra tortor augue, a aliquet tellus. Vivamus eu felis vel lorem tincidunt imperdiet. Fusce iaculis luctus convallis. Proin adipiscing malesuada enim, et feugiat tortor sagittis eu. Cras convallis felis eu leo tempus et fermentum urna accumsan. In quis metus at metus ultricies fringilla. Maecenas sed lacus aliquam nibh semper dignissim et quis est.</p>
    
    <p>Praesent 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 metus adipiscing adipiscing non a sapien. Sed dictum ultrices nibh in tristique. Nulla dapibus laoreet tincidunt. Sed accumsan erat quis mi luctus porta.</p>

    <p>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.</p>

    <p>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. Proin iaculis, nunc ut viverra varius, augue augue porta libero, id viverra nisl elit in mauris. Aenean quis risus ante. Donec bibendum erat a sem vestibulum eu aliquet lectus tincidunt. Vivamus imperdiet congue leo, non ultricies urna sodales sed. Pellentesque habitant 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 at libero.</p>

</div>

è solo un div con un sacco di contenuti fittizi. Ed ecco il CSS iniziale, che imposta alcune dimensioni fisse e attiva entrambe le barre di scorrimento orizzontali e verticali:

  .container {
		  width: 400px;
		  height: 300px;
		  background-color: #DCDCDC;
		  overflow: scroll; /* showing scrollbars */
	}

Dovresti essere in grado di vedere qualcosa di simile a questo:

Passo 2: iniziare con browser Webkit

Una volta (molti anni fa) sono stati introdotti gli peudo elementi CSS nei browsers Webkit per indicare le barre di scorrimento, dando l'opportunità di personalizzare la tua pagina in base al tuo tema.

Aggiungiamo qualche stile, usando il prefisso -webkit- e la barra di scorrimento personalizzata di webkit. Tieni presente che mi sto attenendo alle proprietà CSS di base per facilitare la comprensione, con spiegazioni nei commenti.

1	::-webkit-scrollbar {
2	width: 15px;
3	} /* this targets the default scrollbar (compulsory) */

Quando questo pseudo elemento è presente, WebKit spegnerà il rendering di base della barra di scorrimento e utilizza solo le informazioni fornite nel CSS. - Navigando Safari

E ora per altri pseudo elementi:

	::-webkit-scrollbar-track {
		  background-color: #b46868;
	} /* the new scrollbar will have a flat appearance with the set background color */

	::-webkit-scrollbar-thumb {
		  background-color: rgba(0, 0, 0, 0.2); 
	} /* this will style the thumb, ignoring the track */

	::-webkit-scrollbar-button {
		  background-color: #7c2929;
	} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

	::-webkit-scrollbar-corner {
		  background-color: black;
	} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */

Dopo aver aggiunto questo CSS dovresti essere in grado di vedere il seguente effetto (di nuovo, solo nei browser Webkit).

Indovina un po'? Internet Explorer ha il proprio stile per la barra di scorrimento!

Questo è vero - in effetti IE è stato il primo browser a supportare la modellazione delle barre di scorrimento tramite CSS. Questo è dai tempi di IE 5.5, ma solo il colore può essere modificato.

Queste proprietà possono ancora essere utilizzate oggi; Date un'occhiata a questa singola proprietà su IE 9 per scopi dimostrativi:

1	body {
2	scrollbar-face-color: #b46868;
3	}

Guardate come apparirebbe:

Passo 3: fallback per browser non-Webkit

Basta Webkit. Firefox, IE e Opera possono unirsi al divertimento. Per loro abbiamo un approccio con fallback molto carino sotto forma di jScrollPane. Questo plugin jQuery è stato sviluppato da Kelvin Luck e sarà il nostro salvatore di oggi.

Il sito web di Kelvin ha molti buoni esempi, ma per l'uso di base tutto quello che dobbiamo fare è scaricare jQuery e i file di jScrollPane e implementarli nel modo seguente:

	<!-- this cssfile can be found in the jScrollPane package -->
	<link rel="stylesheet" type="text/css" href="jquery.jscrollpane.css" />

	<!-- latest jQuery direct from google's CDN -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<!-- the jScrollPane script -->
	<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>

	<!--instantiate after some browser sniffing to rule out webkit browsers-->
	<script type="text/javascript">
	
	  $(document).ready(function () {
	      if (!$.browser.webkit) {
	          $('.container').jScrollPane();
	      }
	  });
	
	</script>
				
</body>

Semplicemente per abbinarlo al nostro tema, apriamo jquery.jscrollpane.css e modifichiamo le seguenti righe con i nostri valori di colore (per migliorare le prestazioni è possibile posizionare tutti gli stili all'interno dei propri file):

	.jspTrack
	{
		background: #b46868; /* changed from #dde */
		position: relative;
	}

	.jspDrag
	{
		background: rgba(0,0,0,0.2); /* changed from #bbd */
		position: relative;
		top: 0;
		left: 0;
		cursor: pointer;
	}

Ecco una schermata di ciò che vedrai in Firefox:

Conclusioni

applicazioni 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 ti sia piaciuto questo consiglio rapido e non vedo l'ora di vedere cosa fai con le barre di scorrimento nel tuo lavoro di design!

Ulteriori Risorse

Barre di scorrimento personalizzate in Webkit di Chris Coyier
Modellare le barre di scorrimento su webkit.org

Barre di scorrimento personalizzabili su Envato Market

Se sei alla ricerca di una soluzione pronta, Envato Market offre una selezione di barre di scorrimento che è possibile collegare al tuo sito web per ottenere una serie di effetti. Ecco uno sguardo ad alcuni di loro:

1. Lazybars - Plugin jQuery per barre di scorrimento responsive e personalizzabili

Lazybars è un plugin jQuery semplice da utilizzare e personalizzabile. È possibile implementare queste barre di scorrimento semplicemente aggiungendo ilnome di una classe a qualsiasi elemento scorrevole sul tuo sito web.

Utilizza i temi che sono raccolti in Lazybars, o crea il tuo con semplice CSS.

Lazybars - Themeable responsive scrollbar jQuery plugin — Lazybars - Plugin jQuery per barre di scorrimento responsive e personalizzabili

2. Fancy Scrollbar - WordPress

“Fancy Scrollbar – WordPress” è un plugin che può creare una barra di scorrimento personalizzata nei siti di WordPress. Ha molte opzioni di personalizzazione. È possibile personalizzare il colore, gli effetti, il ritardo di scorrimento, la striscia dei binari e molti altri parametri.

3. Awesome Custom Scrollbar

Awesome Custom Scrollbar è un plugin jQuery altamente personalizzabile per barra di scorrimento per il tuo sito web di WordPress. Con questo plugin è possibile personalizzare la barra di scorrimento della tua pagina web e puoi incorporare la barra di scorrimento personalizzata tramite il codice ovunque desideri, anche nei file del tema.

4. DZS Scroller

DZS Scroller fornisce una barra di scorrimento per il tuo sito che è possibile personalizzare facilmente tramite CSS se i tre temi inclusi non sono sufficienti. Viene inoltre fornito di funzionalità avanzate come lo scorrimento quando il mouse punta sulla barra o la dissolvenza quando il mouse si leva.

5. CSS3 Scrollbar Styles

La barra di scorrimento CSS3 è bella, colorata e facile da usare per il tuo sito web. Inseriscila semplicemente nel file CSS esistente e godetevi le nuove barre di scorrimento CSS3.