cambiar el scrollbar

linker · #1 (**permalink**) 28/05/2004, 23:01

alguien tiene un script para cambiar el scrollbar de un iframe, la idea es dejarlo mas delgado , no quiero cambiarle el color con css

leo91 · #2 (**permalink**) 29/05/2004, 02:48

Hola linker
En las FAQs de Javascript pusieron uno de cómo personalizar el scrollbar, yo llevo un tiempo intentando modificarlo para ponerle imágenes, pero como no tengo los conocimientos suficientes, pues como que no me aclaro con el tema de las funciones.
Espero que tú tengas más suerte y los compañeros que crearon el script te echen una mano.
Saludos.

-----------------------
Se rompe en cuanto se nombra...

tunait · #3 (**permalink**) 31/05/2004, 07:24

Tema trasladado al foro de javascript desde html

KarlanKas · #4 (**permalink**) 31/05/2004, 10:06

He modificado un poco el de las FAQ para que sea más fácil su modificación, se puede modificar con CSS. Para que los botones sean imagenes ponedlos como inputs type image.

Código HTML:

<html> 
<head> 
    <title>Barra de desplazamiento</title> 
	
<style>

#ventana{
z-index:1;
border:solid 1px black;
overflow:hidden;
position:relative;
}

#botonArriba{position:absolute;
padding:0px 0px 0px 0px;
font:normal 8px/8px courier;
top:0px;
z-index:99;
cursor:hand;
}

#botonAbajo{position:absolute;
padding:0px0px0px0px;
font:normal 9px/9px courier;
z-index:99;
cursor:hand;
}

#contenido{
padding:10px 10px 10px 10px;
font:normal 10px/15px verdana;
position:absolute;
top:0px;
left:0px;
background:#ffffcc;
border:solid black 1px;
overflow:hidden;
text-align:justify;
}

#barra{position:absolute;
position:absolute;
z-index:99;
cursor:hand;
}

</style> 


    <script> 
//Muchas gracias a todos los que colaboraron en la elaboración de este script, en especial a JavierB, artífice de la compatibilidad del mismo con NS. 

    ancho=700; 
    altoVentana=300; 
    altoContenido=700; 
    altoBoton=20; 
    anchoBoton=15; 
    incremento=5; 

//    ---------------------------NO EDITAR-------------------------------- 
    recorrido=altoVentana-(2*altoBoton) 
    altoBarra=recorrido*(altoVentana/altoContenido); 
    recorridoBarra=recorrido-altoBarra; 
    incrementoBarra=incremento*(recorridoBarra/(altoContenido-altoVentana)); 
    recorridoAcumuladoBarra=0; 
    recorridoAcumuladoContenido=0; 
    anchoContenido=ancho-anchoBoton; 
    no=false; 
    var yy=0; 
    pulsado=false; 
    var mouseY; 
     
    if (altoVentana>=altoContenido){no=true} 
    altoBarra+=incrementoBarra+1 

</script> 
 
<script for="ventana" event="onmousewheel"> 
    if(document.all){mover(event.wheelDelta/30)} 
    </script> 
 
 <script> 

    function ratonAbajo(){ 
    if (document.all){yy=event.clientY;} 
    else{yy = coorY; } 
    pulsado=true;} 

function inicial(){

document.getElementById("barra").style.top=altoBoton+"px";
document.getElementById("contenido").style.top="0px";
document.getElementById("ventana").style.height=altoVentana+"px";
document.getElementById("ventana").style.width=ancho+"px";
document.getElementById("botonArriba").style.width=anchoBoton+"px";
document.getElementById("botonArriba").style.height=altoBoton+"px";
document.getElementById("botonArriba").style.left=anchoContenido+'px';
document.getElementById("botonAbajo").style.width=anchoBoton+"px";
document.getElementById("botonAbajo").style.height=altoBoton+"px";
document.getElementById("botonAbajo").style.left=anchoContenido+'px';
document.getElementById("botonAbajo").style.top=altoVentana-altoBoton+'px';
document.getElementById("contenido").style.width=anchoContenido+"px";
document.getElementById("barra").style.left=anchoContenido+'px';
document.getElementById("barra").style.height=altoBarra+"px";
document.getElementById("barra").style.top=altoBoton+"px";
if (no){document.getElementById("barra").style.visibility="hidden";} 
document.onmousemove = mouseMove; 
var ns6 = (document.getElementById && !document.all) ? true: false; 
var coorY; 
if (ns6) document.getElementById('barra').addEventListener("mousemove", mouseMove, true) 
function mouseMove(e) 
{ 
if (ns6)    {coorY = e.pageY;} 
return true; 
} 
}
function mover(hacia){ 

    nB=parseInt(document.getElementById("barra").style.top); 
    nC=parseInt(document.getElementById("contenido").style.top); 

if (((nC+(hacia*incremento))<incremento) && (nC+(hacia*incremento)>(altoVentana-altoContenido))){ 
recorridoAcumuladoBarra-=(hacia*incrementoBarra); 
recorridoAcumuladoContenido+=(hacia*incremento); 
     
if(recorridoAcumuladoContenido>0){recorridoAcumuladoContenido=0} 
if(recorridoAcumuladoBarra<altoBoton){recorridoAcumuladoBarra=altoBoton} 
if(recorridoAcumuladoBarra> (recorridoBarra+altoBoton)){recorridoAcumuladoBarr   
a=recorridoBarra+altoBoton} 
     
    document.getElementById("contenido").style.top=recorridoAcumuladoContenido; 
    document.getElementById("barra").style.top=recorridoAcumuladoBarra; 
     
    }} 

     
function ratonMoviendose(){ 
if(pulsado){ 
            if (document.all){y=event.clientY;} 
else{ 
    y = coorY; } 
yy=yy-y; 
yyy=yy/incrementoBarra; 
mover(yyy); 
yy=y; 
}} 
    function seVa(){ 
    pulsado=false; 
     
    } 
    </script> 
</head> 

<body onload="inicial()"> 
<div id="ventana">         
<div id="contenido"> 
En un lugar de la Mancha de cuyo nombre no quiero acordarme no ha mucho tiempo que vivía un aficionado de los de lanza en astillero, adarga antigua, utilitario pequeño y galgo corredor. Frisaba la edad de nuestro aficionado los cincuenta años; era de complexión recia, seco de carnes, enjuto de rostro, gran madrugador y amante del baloncesto. 
<br><br>
Es pues, de saber que este sobredicho aficionado los ratos que estaba ocioso (que eran los más del año) se daba a leer libros de baloncesto con tanta afición y gusto que olvidó casi de todo punto la administración de su hacienda; y llegó a ser tanta la curiosidad y desatino en esto que vendió muchas fanegas de tierra de sembradura para comprar libros de baloncesto en que leer, y así llevó a su casa todos cuantos pudo haber de ellos; y de todos, ninguno le parecía tan bien como el " Saltar y Cambiar " de Díaz Miguel, porque la claridad de su prosa y aquellas intrincadas presiones le parecía de perlas. 
<br><br>
Con estas razones perdía el pobre aficionado el juicio, y desvelábase para entenderlas y desentrañarles el sentido que no se lo sacara ni la entendiera el mismo Wooden. Tuvo muchas veces competencia con el cura de su lugar (que era un hombre docto y con el título regional) sobre el cual había sido mejor entrenador: Palmerín de Mataró o el Caballero Lolo, más maese Nicolás, periodista insigne del mismo pueblo, decía que ninguno llegaba a la altura de Amadís de Reneses, porque tenía muy acomodada condición para todo; que no era entrenador melindroso ni tan llorón como Palmerín de Mataró y que en lo de valentía nadie le iba a la zaga. 
<br><br>
En resolución, el se enfrascó tanto en su lectura, que se le pasaban las noches leyendo de claro en claro y los días de turbio en turbio; y así, de mucho leer y poco dormir se le secó el cerebro de manera que vino a perder el juicio. Que el Cid Ruy Peiró fue campeón de Europa en categoría hembras y que Bernardo de Rovira clasificó a La Salle para la Copa Korac, que se disputaba en honor de un valiente jugador cuyos tiros libres valían cinco puntos. 
<br><br>
En efecto, rematado ya su juicio, vino a dar en el más extraño pensamiento que jamás vio loco en el mundo y fue que le pareció conveniente y necesario, así para el aumento de su honra como para el servicio del baloncesto, hacerse entrenador andante e ir por las pistas del mundo a buscar victorias y a ejercitarse en lo que había leído.
</div> 
<input 
type="button"
value="^"
id="botonArriba"
onMouseOver="pepe22=window.setInterval('mover(1)',20)"
onMouseOut="window.clearInterval(pepe22)">

<input
type="button"
value="v"
id="botonAbajo"
onMouseOver="if(no==false){pepe22=window.setInterval('mover(-1)',20)}"
onMouseOut="if(!no){window.clearInterval(pepe22)}"
>
<input
type="button"
id="barra"
onMouseDown="ratonAbajo()"
onMouseMove="ratonMoviendose()"
onMouseUp="seVa()"
onMouseOut="seVa()">


</div> 
</body> 
</html>

Espero que os sirva!

leo91 · #5 (**permalink**) 01/06/2004, 11:21

Hola KarlanKas, muchas gracias por tu ayuda, espero ahora poder hacer mi propia barra.
Saludos

furoya · #6 (**permalink**) 02/06/2004, 14:32

Hola todos:

un dato; modificar la barra de desplazamiento es CSS. En las FAQs (la 35, creo) puse un ejemplo, pero está mejor explicado en

Propiedades del scroll .

Por supuesto que es para IE5.5. Para que los cambios se vean en todos los navegadores, es mejor la propuesta de KarlanKas.

saludos

furoya