Come personalizzare la scrollbar del proprio sito con jQuery

Come personalizzare la scrollbar del proprio sito con jQuery

Vediamo come personalizzare la scrollbar del proprio sito grazie all’uso di uno script jQuery in pochi passi per dare un tocco di originalità al progetto.

Per personalizzare la scrollbar useremo un ottimo script jQuery creato a tale scopo chiamato enscroll jQuery. Potete scaricare e visionare la documentazione nei link qui sotto:

[button link=”http://enscrollplugin.com/” color=”blue” target=”blank”]Sito ufficiale[/button]  [button link=”http://www.targetweb.it/download/2013/enscroll-js.zip” color=”blue” target=”blank” size=”large”]Download[/button]

Uso e setting up generale

Per prima cosa creiamo un div scrollbox che conterrà tutto il nostro contenuto (Classe o ID a seconda delle necessità):

<div class="scrollbox">
<h1>Contenuto scrollabile</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<p> ... </p>
...
</div>

A questo punto diamo lo stile alla scrollbar e allo scrollbox via CSS

.scrollbox {
overflow: auto; 
width: 368px;  
height: 550px;
}

.vertical-track {
width: 16px;            
background-color: #aaa; 
}

.vertical-handle {
width: 16px;           
background-color: #aaf;
}

Il vertical track ci servirà per stilizzare la barra di scrolling,  mentre il vertical handle è di fatto il cursore posto sul track. Ovviamente width e height del scrollbox sono personalizzabili a seconda delle vostre esigenze. Come ultimo step non ci rimane di usare lo script per rendere operativa la nostra trasformazione:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="javascripts/enscroll-0.4.0.min.js"></script>
<script>
 $(document).ready(function() {
    //Applico scrollbox
    $('.scrollbox').enscroll();   
 });//DOM
 </script>

Uso avanzato: Scrollbar stile Google Apps

In questo esempio concreto vediamo come creare lo stile usato da Google apps per la nostra scrollbar.

STRUTTURA HTML

 <div class="scrollbox">
      <h1>Targetweb.it</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a justo erat, volutpat hendrerit dolor. Sed urna nibh, dapibus at egestas non, vulputate ut quam. Morbi a erat tristique tellus varius venenatis. Aenean lacinia sem eget turpis fringilla commodo. Sed lorem nisi, viverra a interdum nec, varius eu enim. Donec ornare, nunc quis eleifend iaculis, nulla eros mollis tellus, quis faucibus risus odio non lectus. Maecenas ac velit non metus rhoncus commodo. Nunc ligula est, ultricies sed mattis sed, dapibus at arcu. Maecenas lacinia nisl ut sem bibendum ac condimentum purus facilisis. Curabitur ut nibh lobortis libero interdum vehicula vel quis nulla.</p>

      <p>Suspendisse et massa urna. Donec eu lorem nec felis dapibus aliquam viverra in quam. Suspendisse ultrices, nisi ac venenatis porttitor, erat turpis dapibus augue, sed rutrum nunc ante sed enim. Aliquam et tempus mi. Nullam malesuada, nunc a eleifend pretium, justo lorem tempus justo, id adipiscing dolor ipsum sed velit. Maecenas odio massa, feugiat vel sodales ut, placerat at quam. Cras viverra diam vitae diam elementum vitae aliquet erat tincidunt. Quisque fringilla neque in lacus tempor cursus. Curabitur eget nulla et nisi dignissim tempor vel non risus. Mauris ac ipsum metus, a auctor massa. Nunc eros ante, ullamcorper a mollis nec, aliquam sed est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </div>

STILE CSS

.scrollbox {
    overflow: auto;
    width: 400px;
    height: 360px;
    padding: 0 5px;
    border: 1px solid #b7b7b7;
}

.track4 {
    width: 10px;
    background-clip: padding-box;
    background: #fff;
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    border-left-width: 1px;
}

.track4.dragging,
.track4:hover {
    background: #f2f2f2; /* No RGBA support */
    background: rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.1);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.1);
}

.track4:active {
    background: #f2f2f2; /* No RGBA support */
    background: rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.14),
                        inset -1px -1px 0 rgba(0, 0, 0, 0.07);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.14),
                inset -1px -1px 0 rgba(0, 0, 0, 0.07);
}

.handle4 {
    width: 10px;
    background-clip: padding-box;
    background: #ccc; /* No RGBA support */
    background: rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
                        inset 0 -1px 0 rgba(0, 0, 0, 0.07);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
                inset 0 -1px 0 rgba(0, 0, 0, 0.07);
}

.handle4:hover {
    background: #999; /* No RGBA support */
    background: rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
}

.dragging .handle4,
.handle4:active {
    background: gray; /* No RGBA support */
    background: rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
}

JAVASCRIPT

  <!--  JS Files -->
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script src="javascripts/enscroll-0.4.0.min.js"></script>
 <script>
 $(document).ready(function() {

  $('.scrollbox').enscroll({
    verticalTrackClass: 'track4',
    verticalHandleClass: 'handle4',
    minScrollbarLength: 28
  });

 });
 </script>

Come vedete rispetto alla versione “base” abbiamo usato classi diverse per personalizzare il track e l’handle (track4 ed handle4). Ovviamente tali classi vanno specificate anche nel codice JS dello script. Per una lista completa dei parametri vi invito a visionare la documentazione ufficiale del plugin. Fra i parametri più interessanti vi segnalo showOnHover che permette di far scomparire la scrollbar e farla apparire solo il visitatore ci va sopra con il mouse in perfetto stile “facebook”.

Conclusioni e demo

[button link=”http://www.targetweb.it/tutorial/2013/scrollbar-custom/index.html” color=”blue” target=”blank” size=”large”]DEMO[/button]

Enscroll JS è un ottimo esempio di come con piccoli accorgimenti possiamo valorizzare il nostro progetto e renderlo più raffinato e ricercato. Un ottimo strumento molto utile, voi che ne pensate? Conoscete altri plugin similari?

  1. funziona tutto.. tranne la rotellina del mouse.. non è che devo toccare qualche parametro per attivarla? ti sarei molto grato se mi spiegassi come devo fare.. grazie!

      1. no.. a me la barra si sposta se ci clicco sopra e la trascino col mouse ma con la rotellina niente da fare.. 🙁

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

jquery-eseguire-codice-al-keyup-digitazione-della-tastiera
Up Next:

jQuery - eseguire codice al keyup change (digitazione) della tastiera

jQuery - eseguire codice al keyup change (digitazione) della tastiera