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>
Loading ...
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.
18-03-2008
Permalink
[...] Via Xyberneticos [...]
jopicar
18-03-2008
Permalink
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
18-03-2008
Permalink
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
18-03-2008
Permalink
esto es lo unico Impresidnedible
margin: 10px;
}
.clear{
clear:both;
height: 0px;
font-size: 1px;
line-height: 0px;
}
agregando eso, puedes eliminar completamente el archivo layout.css