bScroll

jquery plugin for custom scrollbars

by Salvatore Rotondo

HTML

<p style="text-align:center"><a class="down" href="#">Scrolla Giu`</a> <a class="up" href="#">Scrolla Su`</a></p>

<div id="myshit0" class="box scrollable">
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Oh oh</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Oh oh</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Oh oh</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Oh oh</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Oh oh</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Oh oh</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Oh oh</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla bla</p>
  <p>Bla bla...

CSS

.box {
  margin:5px auto 20px;
  width:300px;
  height:300px;
  background-color:#f1f1f1;
  padding:10px;
  font-size:12px;
  overflow: auto;
}


.bScroll {
    width:24px;
}

.bScrollPadding {
}

.bScroll > .line {
  /* Da qui in poi ti puoi personalizzare lo stile della barra di sotto */
  background-color:#e1e1e1;
  border-radius:15px;
  width:4px;
  position:absolute;
  top:10px;
  left:10px;
  bottom:10px;
}

.bScroll.bScrollInactive {
  display:none;
}

.bScroll > .bar {
  /* Qui ti personalizzi la barretta interna, quella cliccabile per lo scrolling */
  position:absolute;
  top:0;
  left:1px;
  width:22px;
  border-radius:12px;
  background-color:#ccc;
}

.bScroll > .bar:hover{
  background-color:#aaa;
}

.bScroll > .bar.dragging {
  /* Stile che si applica mentre si sta tenendo cliccata la barra */
  box-shadow:0px 0px 2px #000 inset;
}

.figo > .bar{
  background-color:#800;
  box-shadow:2px 2px 4px #a00 inset;
}
.figo > .bar:hover{
  background-color:#a00;
  box-shadow:2px 2px 4px #f00 inset;
}
.figo > .bar.dragging {
  box-shadow:2px 2px 4px #500 inset;
}

JavaScript

/* Applicazione scrollbar */
$(document).ready(function() {

		/* basta indicare gli elementi col selettore jquery */
    
    // Default a tutti i div scrollable
		$('.scrollable').bScroll({barAutoCalc: false});
    
    // Il secondo div non ha la class scrollable, lo inizializziamo diversamente e con una classe css custom
    $('#myshit1').bScroll({class:'figo', autohide: true});

		// Bottoni per scrollare in su` e in giu` la barra
		$('.up').click(function(e) {
    		e.preventDefault();
        $('#myshit0').bScrollUp(300);
    });
    
		$('.down').click(function(e) {
    		e.preventDefault();
        $('#myshit0').bScrollDown(300);
    });

		// Questo configura il tastino per provare l'aggiunta di contenuto dinamico al terzo box
    $('.addrow').click(function(e) {
    		e.preventDefault();
        $('#myshit2').prepend('<p>Ma che bel castello marcondirodirondello!</p>')
    });
});


/* La parte che segue finira` inclusa in un file isolato e dimenticato dal mondo */

/**
 * @todo indagare sul mouseleave della scroll. quando si entra col mouse dal lato della scroll tende a sparire
 * @todo Tastini sopra e sotto per muovere la barra a suon di click
 */
(function($) { 
		let lastPageY,
    		scrollIndex;
    
		let defaultOptions = {
        class: '',						// Classi css custom da aggiungere alla barra
        autohide: false,			// false: mostra sempre la scrollbar
    		barMinHeight: 35,			// Altezza minima della barra di trascinamento
        barAutoCalc: true			// Calcola automaticamente il padding da assegnare all'elemento e la sua width
    };
    
    // Crea il markup della scrollbar
    function scrollerCreate(scrollId, opts, container) {
    		let $scroller = $('<div/>').addClass('bScroll'),
        		$scrollerLine = $('<div/>').addClass('line'),
            $scrollerBar = $('<div/>').addClass('bar');

        $scroller.prop('id', scrollId);
        
        if (opts.class.trim() !== '') {
        		$scroller.addClass(opts.class);
        }
       ...