<HTML>
<HEAD>
<TITLE>Cómo hacer scroll</TITLE>
<STYLE TYPE="text/css"><!--
A {color:#FFFFFF; font-family:'Arial'; font-size:10pt; line-height:20pt;}
A.scroll {font-size:9pt; line-height:11pt;}
A.hideshow {color:#000000}
STRONG {font-family:'Arial'; font-size:15pt; font-weight:bold;}
P {font-family:'Arial'; font-size:11pt; line-height:13pt;}
P.blue {color:#330099}
P.green {color:#666600}
P.purple {color:#800080}
P.brown {color:#804000}
#principal {
position:absolute;
left:50; top:70;
width:400; height:250;
clip:rect(0,400,250,0);
background-color:#6B6B6B;
layer-background-color:#6B6B6B;
visibility:visible;}
#menuelem {
position:absolute;
left:10; top:0;
width:90; height:250;}
#desplazar {
position:absolute;
left:10; top:205; width:90;}
#elementos {
position:absolute;
left:110; top:3;
width:287; height:244;
clip:rect(0,287,244,0);
background-color:#BDBDBD;
layer-background-color:#BDBDBD;}
#elem1 {
position:absolute;
left:5; top:0;
width:278;
visibility:visible;}
#elem2 {
position:absolute;
left:5; top:0;
width:278;
visibility:hidden;}
#elem3 {
position:absolute;
left:5; top:0;
width:278;
visibility:hidden;}
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript"><!--
n=1;ie=0
n=0;ie=1
function init() {
scrollActive = 0
scrollLimit = -200
scrollContentShown = "elem1"
}
function Scroll(direction) {
if (scrollActive) {
var postop = document.getElementById(scrollContentShown).style.top
postop = new Number(postop.replace(/px/,""))
if (direction == "up" && postop < 0) { // ver si ya esta arriba del todo
var inc = 10 // mover de 10 en 10 px
obj =document.getElementById(scrollContentShown)
obj.style.top = postop + inc + "px"
setTimeout("Scroll('up')",20)
}
if (direction == "down" && postop > scrollLimit) { // ver si ya esta abajo del todo
var inc = -10 // mueve de 10 en 10 px
obj = document.getElementById(scrollContentShown)
obj.style.top = postop + inc
// alert(obj.style.top)
setTimeout("Scroll('down')",20)
}
}
}
//que elemento / el maximo de px a dexplazarlo
function scrollChange(which,limit) {
document.getElementById(scrollContentShown).style.visibility = 'hidden'
document.getElementById(which).style.visibility = 'visible'
scrollContentShown = which
scrollLimit = limit
}
function showobj(showobj) {
document.getElementById(showobj).style.visibility = 'visible'
}
function hideobj(hideobj) {
document.getElementById(hideobj).style.visibility = 'hidden'
}
//--></SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" onLoad="init()">
<A CLASS="hideshow" HREF="javascript:showobj('principal')">Muestra</A>
<A CLASS="hideshow" HREF="javascript:hideobj('principal')">Oculta</A>
<DIV ID="principal">
<DIV ID="menuelem">
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=90><TD ALIGN=RIGHT>
<A HREF="javascript:scrollChange('elem1',-200)">1 ELEMENTO</A><br>
<A HREF="javascript:scrollChange('elem2',-200)">2 ELEMENTO</A><br>
<A HREF="javascript:scrollChange('elem3',-200)">3 ELEMENTO</A>
</TD></TABLE>
</DIV>
<DIV ID="elementos">
<DIV ID="elem1">
<STRONG>Item 1</STRONG>
<P CLASS="blue">
Esto es el texto de relleno del primer (1) elemento del scroll ¿te lo repito?
Esto es el texto de relleno del primer (1) elemento del scroll ¿te lo repito?
Esto es el texto de relleno del primer (1) elemento del scroll ¿te lo repito?
Esto es el texto de relleno del primer (1) elemento del scroll ¿te lo repito?
Esto es el texto de relleno del primer (1) elemento del scroll ¿te lo repito?
Esto es el texto de relleno del primer (1) elemento del scroll ¿te lo repito?
Esto es el texto de relleno del primer (1) elemento del scroll ¿te lo repito?
Esto es el texto de relleno del primer (1) elemento del scroll ¿te lo repito?
Esto es el texto de relleno del primer (1) elemento del scroll ¿te lo repito?
Esto es el texto de relleno del primer (1) elemento del scroll ¿te lo repito?
Esto es el texto de relleno del primer (1) elemento del scroll ¿te lo repito?
Esto es el texto de relleno del primer (1) elemento del scroll ¿te lo repito?
</P>
</DIV>
<DIV ID="elem2">
<STRONG>Item 2</STRONG>
<P CLASS="green">
Esto es el texto de relleno del segundo (2) elemento del scroll.
Esto es el texto de relleno del segundo (2) elemento del scroll.
Esto es el texto de relleno del segundo (2) elemento del scroll.
Esto es el texto de relleno del segundo (2) elemento del scroll.
Esto es el texto de relleno del segundo (2) elemento del scroll.
Esto es el texto de relleno del segundo (2) elemento del scroll.
Esto es el texto de relleno del segundo (2) elemento del scroll.
Esto es el texto de relleno del segundo (2) elemento del scroll.
Esto es el texto de relleno del segundo (2) elemento del scroll.
Esto es el texto de relleno del segundo (2) elemento del scroll.
Esto es el texto de relleno del segundo (2) elemento del scroll.
Esto es el texto de relleno del segundo (2) elemento del scroll.
Esto es el texto de relleno del segundo (2) elemento del scroll.
Esto es el texto de relleno del segundo (2) elemento del scroll.
</P>
</DIV>
<DIV ID="elem3">
<STRONG>Item 3</STRONG>
<P CLASS="purple">
Esto es el texto de relleno del TERCERO (3) elemento del scroll.
Esto es el texto de relleno del TERCERO (3) elemento del scroll.
Esto es el texto de relleno del TERCERO (3) elemento del scroll.
Esto es el texto de relleno del TERCERO (3) elemento del scroll.
Esto es el texto de relleno del TERCERO (3) elemento del scroll.
Esto es el texto de relleno del TERCERO (3) elemento del scroll.
Esto es el texto de relleno del TERCERO (3) elemento del scroll.
Esto es el texto de relleno del TERCERO (3) elemento del scroll.
Esto es el texto de relleno del TERCERO (3) elemento del scroll.
Esto es el texto de relleno del TERCERO (3) elemento del scroll.
Esto es el texto de relleno del TERCERO (3) elemento del scroll.
</P>
</DIV>
</DIV>
<DIV ID="desplazar">
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=90><TD ALIGN=RIGHT>
<A CLASS="scroll" HREF="javascript:void(null)"
onMouseDown="scrollActive=1;Scroll('up')"
onMouseUp="scrollActive=0" onMouseOut="scrollActive=0">ARRIBA</A>
<BR><A CLASS="scroll" HREF="javascript:void(null)"
onMouseDown="scrollActive=1;Scroll('down')"
onMouseUp="scrollActive=0" onMouseOut="scrollActive=0">ABAJO</A>
</TD></TABLE>
</DIV>
</DIV>
</BODY>
</HTML>
