Personalizziamo le scrollbar come Facebook con nanoscroller... e un piccolo fix
Il modo migliore per inserire un testo (o ipertesto) di lunghezza variabile in un riquadro di dimensioni fisse, o comunque non molto grandi, è certamente quello di utilizzare i blocchi con lo scroll:
<style> #blocco { width: 300px; height: 300px; overflow: auto; } </style> <div id="blocco"> <p>Questo è il blocco di testo con le scrollbars (se necessarie)</p> </div>
L'unico inconveniente è che le scrollbar non sono configurabili nell'estetica, quindi ogni browser ci mette del suo e di solito il risultato non è dei migliori.
Ecco che ci viene in soccorso un plugin di jQuery: nanoscroller, semplice da usare, versatile, personalizzabile, leggero.
Una volta scaricato abbiamo solamente 2 file da aggiungere alle nostre pagine web, il js e il css
<script src="jquery/jquery.nanoscroller.min.js" type="text/javascript"></script> <link rel="stylesheet" href="jquery/nanoscroller.css" type="text/css" charset="utf-8">
Per utilizzarlo basta racchiudere il nostro testo in un doppio contenitore con le apposite classi nano e nano-content
<style> .nano { width: 300px; height: 300px; } </style> <div class="nano"> <div class="nano-content">Questo è il nostro testo</div> </div>
quindi attivare il plugin nell'evento ready
<script> $(document).ready(function(){ $('.nano').nanoScroller({preventPageScrolling: true, alwaysVisible: true}); }); </script>
Ecco il risultato:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
In questo caso ho utilizzato due opzioni, quella per evitare lo scrolling della pagina quando quello del blocco è terminato (indispensabile per i touch-screen) e quello per lasciarla sempre visibile (altrimenti apparirebbe quando si passa col mouse sul blocco). Comunque ce ne sono molte altre di opzioni e vi rimando alla pagina ufficiale per vederle.
Piccolo Fix per Explorer e Firefox
Su alcune versioni di Internet Explorer e Firefox potete incontrare un piccolo bug per cui si vede un pezzo della scrollbar originale del browser. Per correggerlo basta una modifica al file css, aggiungendo gli attributi margin e padding alla classe .nano .nano-content
.nano .nano-content { position : absolute; overflow : scroll; overflow-x : hidden; top : 0; right : 0; bottom : 0; left : 0; margin: 0px; padding: 0px 15px 0px 0px; }
Potete scaricare il file corretto a questo link: File css corretto per nanoscroller
