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 demo - Descarga 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
JavaScript:
<script type="text/javascript">
/* <![CDATA[ */
function makeScrollbar(content,scrollbar,handle,horizontal,ignoreMouse){
var steps = (horizontal?(content.getScrollSize().x - content.getSize().x):(content.getScrollSize().y - content.getSize().y))
var slider = new Slider(scrollbar, handle, {
steps: steps,
mode: (horizontal?'horizontal':'vertical'),
onChange: function(step){
// Scrolls the content element in x or y direction.
var x = (horizontal?step:0);
var y = (horizontal?0:step);
content.scrollTo(x,y);
}
}).set(0);
if( !(ignoreMouse) ){
// Scroll the content element when the mousewheel is used within the
// content or the scrollbar element.
$$(content, scrollbar).addEvent('mousewheel', function(e){
e = new Event(e).stop();
var step = slider.step - e.wheel * 30;
slider.set(step);
});
}
// Stops the handle dragging process when the mouse leaves the document body.
$(document.body).addEvent('mouseleave',function(){slider.drag.stop()});
}
window.addEvent('domready', function(){
// -- first example, vertical scrollbar --
makeScrollbar( $('content1'), $('scrollbar1'), $('handle1') );
// -- second example, horizontal scrollbar --
makeScrollbar( $('content2'), $('scrollbar2'), $('handle2'), true );
// -- third example, horizontal and vertical scrollbars
makeScrollbar( $('content3'), $('scrollbar3'), $('handle3'), false );
makeScrollbar( $('content3'), $('scrollbar4'), $('handle4'), true, true );
});
/* ]]> */
</script>
/* <![CDATA[ */
function makeScrollbar(content,scrollbar,handle,horizontal,ignoreMouse){
var steps = (horizontal?(content.getScrollSize().x - content.getSize().x):(content.getScrollSize().y - content.getSize().y))
var slider = new Slider(scrollbar, handle, {
steps: steps,
mode: (horizontal?'horizontal':'vertical'),
onChange: function(step){
// Scrolls the content element in x or y direction.
var x = (horizontal?step:0);
var y = (horizontal?0:step);
content.scrollTo(x,y);
}
}).set(0);
if( !(ignoreMouse) ){
// Scroll the content element when the mousewheel is used within the
// content or the scrollbar element.
$$(content, scrollbar).addEvent('mousewheel', function(e){
e = new Event(e).stop();
var step = slider.step - e.wheel * 30;
slider.set(step);
});
}
// Stops the handle dragging process when the mouse leaves the document body.
$(document.body).addEvent('mouseleave',function(){slider.drag.stop()});
}
window.addEvent('domready', function(){
// -- first example, vertical scrollbar --
makeScrollbar( $('content1'), $('scrollbar1'), $('handle1') );
// -- second example, horizontal scrollbar --
makeScrollbar( $('content2'), $('scrollbar2'), $('handle2'), true );
// -- third example, horizontal and vertical scrollbars
makeScrollbar( $('content3'), $('scrollbar3'), $('handle3'), false );
makeScrollbar( $('content3'), $('scrollbar4'), $('handle4'), true, true );
});
/* ]]> */
</script>
