Mootools Styled Scrollbar - Dar estilo a la barra de desplazamiento de nuestros scrollbar
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>
Mootools Styled Scrollbar: barras de desplazamiento con estilo » Comenta o Muere | Actualidad, Humor, Tecnología, Política, Ciencia, Música… y otros muchos temas de los que merece la pena hablar. said,
Wrote on April 4, 2008 @ 17:58
[...] Via Xyberneticos [...]
jopicar said,
Wrote on April 30, 2008 @ 6:10
Hola nikko, una pregunta: para que funcione es preciso enlazar el archivo layout.css?, es decir, que parte del código de ese css es imprescindible?, pues mismo en la página ya editas el css de la scrollbar.
El caso es que no consigo hacerlo funcionar, a ver si me iluminas.
Gracias.
jopicar said,
Wrote on May 16, 2008 @ 10:28
Vaya, parece que no le prestan mucha atención a los comentarios, no nikko?
Bueno, seguiré buscando por ahí, a ver si encuentro algo.
Gracias... ...por nada
Un saludo.
Nikko said,
Wrote on May 17, 2008 @ 15:37
esto es lo unico Impresidnedible
agregando eso, puedes eliminar completamente el archivo layout.css