Come personalizzare la barra di scorrimento jQuery plugin

Question

Stavo pensando di creare un plugin jQuery per la barra di scorrimento personalizzata, ci sono molti plugin disponibili ma voglio creare il mio, problema è che non sto ottenendo il concetto che come dovrei spostare un contenuto spostando altri elementi div (barra di scorrimento) e anche come dovrei spostare il contenuto usando lo scroller del mouse ??

Per favore aiutami a capire questo.

Grazie

Answer 1

Il concetto più semplice sarebbe quella di utilizzare il jQuery UI trascinabile e fissare il metodo .draggable() al .scrollbar

var $scrollable = $(".scrollable"), 
 
    $scrollbar = $(".scrollbar"), 
 
    height  = $scrollable.outerHeight(true), // visible height 
 
    scrollHeight = $scrollable.prop("scrollHeight"), // total height 
 
    barHeight = height * height/scrollHeight; // Scrollbar height! 
 

 
// Scrollbar drag: 
 
$scrollbar.height(barHeight).draggable({ 
 
    axis : "y", 
 
    containment : "parent", 
 
    drag: function(e, ui) { 
 
    $scrollable.scrollTop(scrollHeight/height * ui.position.top ); 
 
    } 
 
}); 
 

 
// Element scroll: 
 
$scrollable.on("scroll", function() { 
 
    $scrollbar.css({top: $scrollable.scrollTop()/height * barHeight }); 
 
});

.parent{ 
 
    position:relative; 
 
    overflow:hidden; 
 
    height:200px; 
 
    width:180px; 
 
    background:#ddd; 
 
} 
 
.scrollable{ 
 
    overflow-y:scroll; 
 
    position:absolute; 
 
    padding:0 17px 0 0; 
 
    width: 180px; 
 
    height:100%; 
 
} 
 
.scrollbar{ 
 
    cursor:n-resize; 
 
    position:absolute; 
 
    overflow:auto; 
 
    top:0px; 
 
    right:0px; 
 
    z-index:2; 
 
    background:#444; 
 
    width:17px; 
 
    border-radius:8px; 
 
}

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script> 
 

 
<div class="parent"> 
 
    <div class="scrollbar"></div> 
 
    <div class="scrollable"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non nunc eget sapien molestie mollis. Proin vestibulum vehicula varius. Duis a nunc ac risus facilisis consectetur. 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non nunc eget sapien molestie mollis. Proin vestibulum vehicula varius. Duis a nunc ac risus facilisis consectetur. 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non nunc eget sapien molestie mollis. Proin vestibulum vehicula varius. Duis a nunc ac risus facilisis consectetur. 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non nunc eget sapien molestie mollis. Proin vestibulum vehicula varius. Duis a nunc ac risus facilisis consectetur.  
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non nunc eget sapien molestie mollis. Proin vestibulum vehicula varius. Duis a nunc ac risus facilisis consectetur. 
 
    </div> 
 
</div>

Quanto sopra è solo un esempio con la necessaria logica e matematica coinvolti,
manca la "hide-scrollbar", solo per mantenerlo semplice. Ti lascio per aggiungere tutte le modifiche necessarie, i componenti aggiuntivi.

Answer 2

Realizza barra di scorrimento personalizzata senza jQuery-UI.

HTML: -

<div class="parent"> 
      <div class="scrollbar"></div> 
      <div class="scrollable"> 
       <p>Lorem ipsum dolor sit amet, 
       consectetur adipiscing elit. Cras non nunc eget sapien molestie mollis. 
       Proin vestibulum vehicula varius. Duis a nunc ac risus facilisis consectetur.</p> 
      </div> 
    </div> 

css: -

.parent{ 
    position:relative; 
     margin:50px; 
     overflow:hidden; 
    height:200px; 
    width:180px; 
    background:#ddd; 
} 
.scrollable{ 
     overflow-y:scroll; 
    position:absolute; 
     padding:0 17px 0 0; 
    width: 180px; 
     height:100%; 
} 
.scrollbar{ 

    position:absolute; 
    overflow:auto; 
    top:0px; 
    right:0px; 
    z-index:2; 
    background:#444; 
    width:7px; 
    border-radius:5px; 
} 

Javascript: -

var $scrollable = $('.scrollable'); 
    var $scrollbar = $('.scrollbar'); 
    $scrollable.outerHeight(true); 
    var H = $scrollable.outerHeight(true); 
    var sH = $scrollable[0].scrollHeight; 
    var sbH = H*H/sH; 



$('.scrollbar').height(sbH); 

$scrollable.on("scroll", function(){ 

    $scrollbar.css({top: $scrollable.scrollTop()/H*sbH }); 
});