Cómo hacer barra de desplazamiento personalizada jQuery plugin

Question

Estaba pensando en hacer el plugin jQuery personalizado de la barra de desplazamiento, hay muchos complementos disponibles para él, pero quiero hacer el mío, el problema es que no entiendo el concepto de cómo debo mover un contenido moviendo otro elemento div (barra de desplazamiento) y también ¿cómo debo mover contenido usando el mouse scroller?

Por favor, ayúdame a entender esto.

Gracias

Answer 1

El concepto más fácil sería utilizar la interfaz de usuario jQuery se puede arrastrar y colocar el Método .draggable() a la .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>

Lo anterior es sólo un ejemplo con la necesaria lógica y matemática involucrada,
se pierde la "barra de desplazamiento de la piel", simplemente para mantenerlo simple. Dejaré que agregues todos los ajustes necesarios, complementos.

Answer 2

Haga barra de desplazamiento personalizada sin 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 }); 
});