Scroll 1 (VI)
por Luciano Moreno, del departamento de diseño web de BJS Software.

Doble scroleo.-

Para implementar el scroll hacia abajo, teóricamente lo único que debemos hacer es establecer el enlace de activación correspondiente y cambiar el valor de la variable valor, fijando además un límite inferior de scroleo, que va a coincidir, lógicamente, con el valor inicial que tenía la capa, para que al final quede como estaba al principio.

Para controlar si la función recorta() debe subir o bajar la capa, vamos a introducir en ella un argumento, donde , que va a ejecutar una porción de código u otra. El código nos queda:

   var paso=0, H=280, Y=50, valor,tiempo, activo= false;
    var capa="texto";

    function iniciaValores()
    {
        document.all(capa).style.height="280";
        document.all(capa).style.top="50";
        document.all(capa).style.clipt="rect(0,300,280,0)";
    }

    function recorta(donde)
    {
        Y=parseInt(document.all[capa].style.top);
        H=parseInt(document.all[capa].style.height);
        if((Y>altura)&&(donde==0))
        {
            activo=true;
            valor=5;
            paso+=valor;
            document.all[capa].style.top = Y-valor;
            document.all[capa].style.height = H+valor;
            eval("document.all['"+capa+"'].style.clip='rect("+paso+",300,"+(H+valor)+",0)'");
            tiempo=setTimeout("recorta(0)",50);
        }
        else if((Y<=50) && (donde==1) && (activo==true))
        {
            valor=-5;
            paso+=valor;
            document.all[capa].style.top = Y-valor;
            document.all[capa].style.height = H+valor;
            eval("document.all['"+capa+"'].style.clip='rect("+paso+",300,"+(H+valor)+",0)'");
            tiempo=setTimeout("recorta(1)",50);
        }
    }

1) Hemos introducido una variable global nueva, activo, que va a controlar si la capa se ha deplazado hacia arriba alguna cantidad de pixels, de tal forma que el movimiento de la capa hacia abajo sólo se permite si ha sido así. La razón de proceder así es que si no, al fijar como límite de desplazamiento hacia abajo la posición inicial de la capa, si pulsaramos sobre el botón abajo en primer lugar, la capa se desplaza 5 pixels, produciéndose un salto no deseado. Cuando la capa se ha desplazado hacia arriba, activo se pone a true y permite el funcionamiento del scroll hacia abajo.

2) Si llamamos a la función pasándole como argumento 0, (como valor de donde), la capa subirá. Si la llamamos con argumento 1, la capa bajará.

El resultado de este código lo tenéis en esta ventana flotante.

Como podéis ver, el código funciona bien, siempre que no se pulse un enlace mientras la capa se está moviendo. Si cuando se está moviendo hacia arriba pinchamos en el enlace "abajo", la función se vuelve loca y empieza a parpadear.

Esto es debido a que se está ejecutando en ese momento un contador de tiempo (tiempo=setTiemout(...)), que cuando pasan los milisegundos fijados llama de nuevo a la función, pasándole un argumento 0. Al pinchar el "abajo" ocurre lo mismo, pero pasándole una argumento 1. En ese momento, estamos llamado a la función alternativamente cada 50 milisegundos, una vez diciéndole que suba la capa y otra diciéndole que la baje.

Esto de soluciona borrando el contador de tiempo antes de llamar a la funcisn desde uno de los enlaces, asegurándonos así de que el sentido de movimiento que se estaba ejecutando se detiene. Para borrar el contador se usa el método clearTimeout(contador).

Como resultado final tenemos el siguiente código, en el que he sustituido los enlaces simples por unas imágenes de flecha, y he sustituido para llamar a la función el evento onClick por onMouseOver. Los contadores de tiempo los borramos cuando el usuario quite el cursor de una de las flechas, mediante el evento onMouseOut. Este código es ya cross-browser, es decir, funciona tanto en Internet Explorer como en Nestcape Navigator 4x y 6x:

<script language="JavaScript" type="text/javascript">
    /**
    * variables globales de asignacion de navegador
    */   
    var ie=(document.all) ? 1:0;
    var n4=(document.layers) ? 1:0;
    var n6=(document.getElementById) ? 1:0; 

    var paso=0;
    var valor;
    var tiempo;
    var altura=-50;
    var Y;
    var activo=false;
    var capa="texto";
    var tiempo;

    /**
    * funcion para inicializar valores generales en la interfaz
    */
    function iniciaValores()
    {
        Y=50;
        paso=0;

        if(ie)
        {
            document.all[capa].style.top=Y;
            document.all[capa].style.height=280;
            document.all[capa].style.clip="rect(0px,270px,280px,0px)";
        }
        else if(n4)
        {
             document.layers[capa].top=Y;
             document.layers[capa].height=280;
         }
        if(n6)
        {
            document.getElementById(capa).style.top=Y;
            document.getElementById(capa).style.height=280;
            document.getElementById(capa).style.clip="rect(0px,270px,280px,0px)";
        }
    }

    /**
    * funcion para scrolear la capa de textos
    */
    function recorta(donde)
    {
        if(ie)
        {
            clearTimeout(tiempo);
            Y=parseInt(document.all[capa].style.top);
            H=parseInt(document.all[capa].style.height);
            if((Y>altura)&&(donde==0))
            {
                activo=true;
                valor=5;
                paso+=valor;
                document.all[capa].style.top = Y-valor;
                document.all[capa].style.height = H+valor;
                eval("document.all['"+capa+"'].style.clip='rect("+paso+",300,"+(H+valor)+",0)'");
                tiempo=setTimeout("recorta(0)",50);
            }
            else if((Y<=50) && (donde==1) && (activo==true))
            {
                valor=-5;
                paso+=valor;
                document.all[capa].style.top = Y-valor;
                document.all[capa].style.height = H+valor;
                eval("document.all['"+capa+"'].style.clip='rect("+paso+",300,"+(H+valor)+",0)'");
                tiempo=setTimeout("recorta(1)",50);
            }
        }
        else if( n4)
        {
            Y=document.layers[capa].top;
            H=document.layers[capa].height;
            if((Y>altura)&&(donde==0))
            {
                activo=true;
                valor=5;
                paso+=valor;
                document.layers[capa].top = Y-valor;
                document.layers[capa].height = H+valor;
                document.layers[capa].clip.top=paso;
                document.layers[capa].clip.bottom=(H+valor);
                tiempo=setTimeout("recorta(0)",50);
            }
            else if((Y<=120)&&(donde==1) && (activo==true))
            {
                valor=-5;
                paso+=valor;
                document.layers[capa].top = Y-valor;
                document.layers[capa].height = H+valor;
                document.layers[capa].clip.top=paso;
                document.layers[capa].clip.bottom=(H+valor);
                tiempo=setTimeout("recorta(1)",50);
            }
        }
        else if(n6)
        {
            Y=parseInt(document.getElementById(capa).style.top);
            H=parseInt(document.getElementById(capa).style.height);
            if((Y>altura)&&(donde==0))
            {
                activo=true;
                valor=5;
                paso+=valor;
                document.getElementById(capa).style.top = Y-valor;
                document.getElementById(capa).style.height = H+valor;
                eval("document.getElementById('"+capa+"').style.clip='rect("+paso+",300,"+(H+valor)+",0)'");
                tiempo=setTimeout("recorta(0)",50);
            }
            else if((Y<=120)&&(donde==1) && (activo==true))
            {
                valor=-5;
                paso+=valor;
                document.getElementById(capa).style.top = Y-valor;
                document.getElementById(capa).style.height = H+valor;
                eval("document.getElementById('"+capa+"').style.clip='rect("+paso+",300,"+(H+valor)+",0)'");
                tiempo=setTimeout("recorta(1)",50);
            }
        }
   }

</script>

El resultado lo tenéis en la siguiente ventana.