styledscrollbar.jpg

Pequeña pieza de javascript que crea un agradable Estilo para las barras de desplazamiento de nuestros scrollbar, utilizando Css y Mootools. Las barras de desplazamiento se pueden presentar con un estilo horizontal y / o vertical.

Ver demoDescarga Ejemplo – Mas info Mootools CSS Styled Scrollbar

No explico los pasos para usarlo, porque con el demo que arme y que pueden descargar es suficiente. Recuerden que también es necesario un poco de CSS y Mootools, en el ejemplo a descargar, se encuentra todo lo que necesitaran.
El javascript

  1. <script type="text/javascript">
  2.             /* <![CDATA[ */
  3.            
  4.             function makeScrollbar(content,scrollbar,handle,horizontal,ignoreMouse){
  5.                 var steps = (horizontal?(content.getScrollSize().x - content.getSize().x):(content.getScrollSize().y - content.getSize().y))
  6.                 var slider = new Slider(scrollbar, handle, {   
  7.                     steps: steps,
  8.                     mode: (horizontal?'horizontal':'vertical'),
  9.                     onChange: function(step){
  10.                         // Scrolls the content element in x or y direction.
  11.                         var x = (horizontal?step:0);
  12.                         var y = (horizontal?0:step);
  13.                         content.scrollTo(x,y);
  14.                     }
  15.                 }).set(0);
  16.                 if( !(ignoreMouse) ){
  17.                     // Scroll the content element when the mousewheel is used within the
  18.                     // content or the scrollbar element.
  19.                     $$(content, scrollbar).addEvent('mousewheel', function(e){ 
  20.                         e = new Event(e).stop();
  21.                         var step = slider.step - e.wheel * 30; 
  22.                         slider.set(step);                  
  23.                     });
  24.                 }
  25.                 // Stops the handle dragging process when the mouse leaves the document body.
  26.                 $(document.body).addEvent('mouseleave',function(){slider.drag.stop()});
  27.             }
  28.                        
  29.             window.addEvent('domready', function(){            
  30.                 // -- first example, vertical scrollbar --
  31.                 makeScrollbar( $('content1'), $('scrollbar1'), $('handle1') );
  32.                 // -- second example, horizontal scrollbar --
  33.                 makeScrollbar( $('content2'), $('scrollbar2'), $('handle2'), true );
  34.                 // -- third example, horizontal and vertical scrollbars
  35.                 makeScrollbar( $('content3'), $('scrollbar3'), $('handle3'), false );
  36.                 makeScrollbar( $('content3'), $('scrollbar4'), $('handle4'), true, true ); 
  37.             });
  38.             /* ]]> */
  39.         </script>