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. 
Filed under: javascript | 1 Comment
Tags: javascript
Excelente me gusto este aporte…
Muchas gracias…
Saludos (: