Control y posicionamiento de la barra de scroll

02Nov08

Desde hace algún tiempo andaba dándole vueltas a un problema y la solución es mas simple de lo que se supone. El problema era cómo posicionar la barra de desplazamiento vertical (o de scroll vertical) en la parte inferior de la página al cargar la misma. Normalmente la barra aparece en la parte superior, pero lo que necesitaba era que se comporte al igual que en un chat: que con cada reload de la pagina, el scroll vertical esté en la parte mas baja del la página o iframe.

En JavaScript existe una función window.scrollBy(x, y); que posiciona las barras de desplazamiento en las coordenadas x e y. La verdad, es que no se trata de coordenadas sino de pixeles, horizontales para x y verticales para y. Entonces la solución al problema pasa por utilizar este método para mover la barra hacia abajo. ¿Pero cuántos pixeles hacia abajo? Tendríamos que saber cuántos pixeles de largo tiene la página y una vez que lo sepamos, colocar ese valor para y. Para x=0, la barra horizontal no se desplaza y por lo tanto la dejamos en 0.

Ahora bien, ¿Existe algún método o propiedad que me de el valor máximo de pixeles que utiliza una página?. Afortunadamente SI! Pero como dice alguna gente conocida.. “nunca la felicidad es conpleta!”: la propiedad que me da ese valor funciona en Firefox pero no en IE, y viceversa, el que anda para IE, no lo hace para Firefox.

Las propiedades en cuestión son window.innerHeight para Firefox y document.body.clientHeight para IE. Para evitarnos el problema de que funcione para uno y no para otro, tendremos que detectar el tipo de navegador que se está usando y dependiendo de cual sea, desplazar el scroll con window.scrollBy(x, y); cargando el valor de y con window.innerHeight o  con document.body.clientHeight, según corresponda.

Aqui les dejo una página como ejemplo de cómo implementar lo dicho:

<html><head><title>usuario conectado</title></head>

<body>

<p>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

Colocar texto aqui.<br>

etc.

<script type=”text/javascript” language=”JavaScript1.5″>

if (window.innerHeight) {

document.write(“FF “+window.innerHeight);

window.scrollBy(0,window.innerHeight*5);

}

else {

document.write(“IE “+document.body.clientHeight);

window.scrollBy(0,document.body.clientHeight*5);

}

</script>

</p>

</body>

</html>

Como verán, el script se tiene que ejecutar al final de la carga de la página y no al inicio…porque si lo ejecutamos al comenzar, la longitud en pixeles de la página será cero!

Si leen con atención el código, verán que a la propiedad en cuestión (window.innerHeight o document.body.clientHeight, según sea), la multiplico por un valor, en éste caso 5. Esto es porque por alguna extraña razón que desconozco, si coloco sólo esos valores, el scroll no aparece justo abajo. Aparece solo un poco mas arriba, digamos, al 90% del largo. Entonces, ¿qué pasa si a ese valor lo multiplico digamos por 5 o por 100? La respuesta a eso es que el nuevo valor de y exederá sobradamente el 100%. Si coloco este nuevo valor de y, la barra se moverá sólo al valor máximo que alcanzó, en este caso, llegará a ese 100% deseado. 🙂

Anuncios


8 Responses to “Control y posicionamiento de la barra de scroll”

  1. Excelente me gusto este aporte…

    Muchas gracias…

    Saludos (:

  2. 2 WhiteSkull

    Buen aporte, ya me estaba comiendo la bola con lo del focus en un div tag generado, así que sólo me ocurrió colocarlo al final de la página y aplicarle el scroll hacia abajo… gracias chaval

  3. Buen Artículo
    Me fascinó la manera en que escribe sobre el tema.
    Seguiré visitando esta página

  4. 4 Miv

    Pero donde hago todo esto que dices, tengo que copiar y pegar donde?, no entiendo todo esto, solo se que cuando abro el msn.com y lo muevo me tira parriba!!

    • Saludos.
      si te fijas al final del post verás que dice que el script debe colocarse al final de la página, antes de la etiqueta .
      Veras que el script esta destacado en color rojo.

      • 6 Miv

        Hola, Pues tu perdona pero quizá estás algo acostumbrado a hablar con gente que de esto sabe, yo no!!, vamos a ver, a que te refieres con final de la pagina antes de la etiqueta??, que es lo que tengo que copiar??, por lo que entiendo solo es la parte roja, Bien y donde la pego?? porque al final de la pagina no tengo forma de pegarla, donde me paro para pegarla si es así.
        Ya veo que hay gente que aprueba lo que has hecho, osea te pintan como crack, así que ayudame por favor!!, dame indicaciones, muchas gracias.
        A… y un saludo, que la educación nunca se pierda.

      • Tu tendrías tu archivo html, php, aspx o el que fuera mas o menos con las siguientes etiquetas:

        //tu codigo
        // aqui pega el script en rojo del post

      • Perdón pero me está funcionando mal el editor.
        El script en rojo deberías pegarlo justo antes de la etiqueta de cierre body (la etiqueta de cierre body es la que tiene una barra diagonal y el texto body, y se encuentra entre las últimas lineas de tu archivo).


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s


A %d blogueros les gusta esto: