Yo estaba pensando para personalizar la barra de desplazamiento, plugin de jQuery, hay muchos plugins disponibles para él, pero yo quiero hacer mi propio problema, es que no estoy recibiendo el concepto de que ¿cómo debo mover un contenido por el movimiento de otro elemento div (barra de desplazamiento) y también cómo debo mover el contenido mediante el scroll de ratón??

Por favor me ayude a entender esto.

Gracias

No he probado ninguna disponible plugin, sólo quiero hacer mi propio así que antes de empezar, la idea debe ser claro que lo que es el concepto y la lógica detrás de esto, si es claro entonces puedo empezar a construir uno.

OriginalEl autor Dheeraj Agrawal | 2012-03-05

1 Comentario

  1. 0

    Personalizar barra de desplazamiento 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 });
    });

    OriginalEl autor Arshid KV

Dejar respuesta

Please enter your comment!
Please enter your name here