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!