P.- ¿Cómo hacer una barraa de scroll personalizada con los iconos formas y colores que quiera?
R.- Por medio de este script:
(Compatible con Opera 7, NS 6.2 y IE 5.0) Código PHP:
<html>
<head>
<title>Barra de desplazamiento</title>
<script>
//Script original de KarlanKas para Forosdelweb.com
//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
estilo='<style>';
estilo+='#ventana{'
estilo+=' height:'+altoVentana+'px;';
estilo+=' width:'+ancho+'px;';
estilo+=' z-index:1;';
estilo+=' border:solid 1px black;';
estilo+=' overflow:hidden;';
estilo+=' position:relative;';
estilo+='}'
estilo+='#botonArriba{ position:absolute;';
estilo+=' padding:0px 0px 0px 0px;';
estilo+=' font:normal 8px/8px courier;';
estilo+=' top:0px;';
estilo+=' width:'+anchoBoton+'px;';
estilo+=' height:'+altoBoton+'px;';
estilo+=' z-index:99;';
estilo+=' cursor:hand;';
estilo+=' left:'+(ancho-anchoBoton)+'px;';
estilo+=' }'
estilo+='#botonAbajo{ position:absolute;';
estilo+=' padding:0px 0px 0px 0px;';
estilo+=' font:normal 9px/9px courier;';
estilo+=' width:'+anchoBoton+'px;';
estilo+=' height:'+altoBoton+'px;';
estilo+=' top:'+(altoVentana-altoBoton)+'px;';
estilo+=' left:'+(ancho-anchoBoton)+'px;';
estilo+=' z-index:99;';
estilo+=' cursor:hand;';
estilo+='}';
estilo+='</style>';
estiloContenido='style="';
estiloContenido+=' width:'+(anchoContenido)+'px;';
estiloContenido+=' padding:10px 10px 10px 10px;';
estiloContenido+=' font:normal 10px/15px verdana;';
estiloContenido+=' position:absolute;';
estiloContenido+=' top:0px;'
estiloContenido+=' left:0px;'
estiloContenido+=' background:#ffffcc;';
estiloContenido+=' border-right:solid black 1px;';
estiloContenido+=' height:'+altoContenido+'px;'
;
estiloContenido+=' overflow:hidden;';
estiloContenido+=' text-align:justify;"';
estiloBarra='style="position:absolute;';
estiloBarra+=' width:'+anchoBoton+'px;';
estiloBarra+=' position:absolute;';
estiloBarra+=' top:'+altoBoton+'px;';
estiloBarra+=' z-index:99;';
estiloBarra+=' cursor:hand;';
estiloBarra+=' left:'+(ancho-anchoBoton)+'px;';
if (no){estiloBarra+=' visibility:hidden;';}
estiloBarra+=' height:'+altoBarra+'px;"';
document.write(estilo);
</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;}
</script>
<script>
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>
<div id="ventana">
<script>
document.write('<div id="contenido" '+estiloContenido+'>');
</script>
1 Texto<br>
2 Texto<br>
3 Texto<br>
4 Texto<br>
5 Texto<br>
6 Texto<br>
7 Texto<br>
8 Texto<br>
9 Texto<br>
10 Texto<br>
-----------------------------------------<br>
11 Texto<br>
12 Texto<br>
13 Texto<br>
14 Texto<br>
15 Texto<br>
16 Texto<br>
17 Texto<br>
18 Texto<br>
19 Texto<br>
20 Texto<br>
-----------------------------------------------------
------------------------------------------------------
-----------------------------------------------------
---------------------------</br>
21 Texto<br>
22 Texto<br>
23 Texto<br>
24 Texto<br>
25 Texto<br>
26 Texto<br>
</div>
<input type="button"
value="?"
id="botonArriba"
onMouseOver="pepe22=window.setInterval('mover(1)',20)"
onMouseOut="window.clearInterval(pepe22)">
<input type="button"
value="?"
id="botonAbajo"
onMouseOver="if(no==false){pepe22=window.setInterval('mover(-1)',20)}"
onMouseOut="if(!no){window.clearInterval(pepe22)}"
>
<script>
document.write('<input type="button"');
document.write(' id="barra" onMouseDown="ratonAbajo()"');
document.write(' onMouseMove="ratonMoviendose()"');
document.write(' onMouseUp="seVa()" onMouseOut="seVa()" ');
document.write(estiloBarra);
document.write(' >');
//----------------------RATON EN NS-------------------------------
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;
}
</script>
</div>
</body>
</html>