[Tips] Como detectar el fin de Página con Javascript, a lo Facebook :)
Hola, este post aunque sea sencillo, tiene algo especial (por lo menos para mi, jejeje) debido a que es el primer post post-terremoto que sea articulo, agradezco mucho las palabras de apoyo.
Ahora bien, al articulo.
Te has fijado que en Facebook, al momento de llegar al fin de la pagina, haciendo scroll, se carga nuevo contenido y así sucesivamente, entonces la pregunta, ¿Como puedo simular eso?
Manos a la Obra
Ya que no existe un evento onScroll, que nos podría ser de ayuda, vamos a tener que construir algo parecido y vamos a utilizar document.body.scrollTop, que representa el numero de pixeles que el usuario se ha desplazado hacia abajo desde la parte superior de la página. El tema es que scrollToplo ocupa IE y los demás navegadores utilizan pageYOffset.
La idea del ejemplo es tener una grilla y que cuando lleguemos al final , en la barra de estado se setee el texto “Fin de Pagina, ocupe la paginación de la grilla”, y en caso contrario, que indique al usuario que se puede ocupar las barras de desplazamiento.
El siguiente código utiliza la función, “inicioFuncion” como punto de partida, la que será llamada en el tag body: <body onload="InicioFuncion();"> de tal manera que al momento de cargar la página, se ejecute, y podemos observar que esta función setea la barra de estado y luego llama con un setInterval a la función RevisarPosicion cada 300 milisegundos, esto nos dará el efecto del onScroll. La posición que voy establecer es de 260 pixeles, que es totalmente arbitrario al ejemplo (la ventana de IE la voy a modificar en tamaño para que se vea el efecto).
Es importante remarcar que para que el ejemplo funcionara bien, cambié el Doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Ahora el código BLOCKED SCRIPT
<script type="text/javascript">
var position = 0;
function InicioFuncion() {
window.status = "Ocupe las barras de desplazamiento para ir al final de la página";
setInterval("RevisarPosicion()", 300);
}
function RevisarPosicion() {
if (navigator.appName == "Microsoft Internet Explorer") {
var position = document.body.scrollTop;
}else {
var position = window.pageYOffset;
}
if (position > 260) {
window.status = "Fin de Pagina, ocupe la paginación de la grilla";
} else {
window.status = "Ocupe las barras de desplazamiento para ir al final de la página";
}
}
</script>
Como es de costumbre te dejo un video, quizás no se distingue mucho, pero lo puedes ver con full Screen y te vas a dar cuenta.
Espero que te sirva y ánimo!!,que recién estoy sintiendo una replica(temblor) al subir esto, ejejjeje
Saludos,
Gonzalo