Implementando el infinite scroll

cnyx · #1 (**permalink**) 08/04/2013, 16:13

Buenas noches,

antes que nada comentar que no soy un experto en jquery ni mucho menos. Intento ir aprendiendo poco a poco cuando tengo tiempo, dicho esto planteo mi duda.

Estaba pensando en implementar el famoso infinite scroll en una web, y la verdad es que veo que es una solución relativamente sencilla que añade una gran comodidad a la carga de según que contenido. Por ir al grano, encuentro un problemas calculando cuando llego al final de la pagina haciendo scroll. Defino la siguiente condicion para que ejecute la accion que deseo:

Código:

if($(window).scrollTop() == $(document).height() - $(window).height()){

//accion

}

Resulta que en lugar de ejecutar la acción al llegar al final de la pagina, lo hace al llegar al inicio, y no entiendo porque. Tanto $(document).height() como $(window).height() tienen el mismo valor, cuando en teoría debería ser diferente ¿no? excepto claro el caso particular en que el documento mida lo mismo que la ventana, pero en principio no es mi caso. El contenido de la pagina se carga desde el principio con llamadas ajax y no se si eso altera el $(document).height().

A alguien se le ocurre alguna idea, o me puede dar alguna forma eficaz de calcular cuando hemos llegado al final de la pagina?

Agradezco de antemano la ayuda.

Saludos.

Kamae · #2 (**permalink**) 09/04/2013, 05:13

Hola buenas

Eso que pones, lo tienes dentro de document ready no? Yo además le añadiría un parseFloat a la operación de resta. Probaría algo así:

Código PHP:

  $(document).ready(function(){ 
   if($(window).scrollTop() == parseFloat($(document).height() - $(window).height())){ 
      alert("OLA KE ASE"); 
   } 
});

Si aun así no te funciona, pon 4 alerts antes del if para saber qué te está dando y donde puede estar el error:

Código PHP:

  $(document).ready(function(){ 
   alert("SCROLLTOP=>"+$(window).scrollTop()+"\nDOC HEIGHT=>"+$(document).height()+"\nWIN HEIGHT=>"+$(window).height()+"\nRESTA=>"+parseFloat($(document).height() - $(window).height())); 
   if($(window).scrollTop() == parseFloat($(document).height() - $(window).height())){ 
      alert("OLA KE ASE"); 
   } 
});

Espero que te sirva, saludos!

cnyx · #3 (**permalink**) 09/04/2013, 11:33

Hola Kamae,

gracias por tu respuesta. Con el parseFloat sigue dando error, el alert me devuelve lo siguiente:

Código:

SCROLLTOP=>2
DOC HEIGHT=>2605
WIN HEIGHT=>2605
RESTA=>0

No entiendo porque Doc height y Win Height son iguales. Se te ocurre algo? Y respecto a tu primera pregunta, si que está dentro de document ready.

Saludos.

Kamae · #4 (**permalink**) 11/04/2013, 02:17

Mmmm bueno, tanto window como document hacen referencia a 2 elementos muy "globales" por así decirlo, window es el objeto de la ventana en sí (por lo tanto ocupa todo), y document es el documento <html> que también ocupa todo a no ser que le hayas asignado un height. Te incluyo los enlaces porque las explicaciones teóricas no son lo mío jejej

A ver, explícame un poco qué intentas hacer. El infinite scroll ya veo lo que es, lo que tiene facebook que conforme llegas al final, se expande, no? Entonces, cómo intentas hacerlo?

PD: Por si de momento puede ayudarte, yo cuando he jugado con alturas o anchuras de elementos y tal, como estás haciendo, también usaba el .innerHeight() que te da la altura que tiene, no la que le dices en el CSS.

cnyx · #5 (**permalink**) 11/04/2013, 04:22

Bueno pues exactamente lo que quiero hacer es ejecutar una acción (la accion en si no viene al caso) cuando haciendo scroll se llegue exactamente al final de la pagina. Lo que me gustaría saber es que condición detecta ese momento. Logicamente busco algo que funcione en todos los navegadores y todas las pantallas.
La cuestión es que la forma descrita es como se detecta esa situacion, pero no se porque obtengo los mismos valores en $(window).height y $(document).height, esto no debería ser así. El $(document).height deberia ser mayor que el $(window).height

Kamae · #6 (**permalink**) 11/04/2013, 04:47

Vale, he encontrado los ejemplos que ponías y a mi tampoco me va porque también me da el mismo resultado y la resta obviamente da 0... Sí se me ocurre alguna chapucilla para sacarlo, pero no sé si es lo correcto y dudo que facebook lo saque así xD Así que debe haber alguna forma correcta.

Lo que hago es: recojo el valor del scroll en scrollActual, luego le asigno al scroll 99999 (que será bastante más del real) y se pondrá abajo de todo, vuelvo a recogerlo pero esta vez lo guardo en scrollMax. Por mucho que le pases 99999, si su capacidad máxima es 800, va a recogerte 800. Luego vuelvo a indicarle que el scrollTop está en la posición que había (scrollActual). Con esto ya puedes saber que si scrollActual==scrollTop , estás abajo de todo.

Prueba este código. Desplázate por el scroll y pulsa click en cualquier sitio de la página para que te informe de donde te encuentras.

Espero que te sirva de ayuda, saludos!

Código PHP:

  <html>
<head>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("body").click(function(){
                var scrollActual=$("body").scrollTop();
                $("body").scrollTop(99999);
                var scrollMax=$("body").scrollTop();
                $("body").scrollTop(scrollActual);
                if(scrollActual<scrollMax) alert("Estás en "+scrollActual+" y el tope es "+scrollMax+"!");
                else if(scrollActual==scrollMax) alert("Estás abajo de todo! En "+scrollMax+"!");
            });
        });
    </script>
</head>
<body style="width:100%;">
    BLabla<br/><br/><br/>BLabla<br/><br/><br/>BLabla<br/><br/><br/>BLabla<br/><br/><br/>BLabla<br/><br/><br/>BLabla<br/><br/><br/>BLabla<br/><br/><br/>
    BLabla<br/><br/><br/>BLabla<br/><br/><br/>BLabla<br/><br/><br/>BLabla<br/><br/><br/>BLabla<br/><br/><br/>BLabla<br/><br/><br/>BLabla<br/><br/><br/>
    BLabla<br/><br/><br/>BLabla<br/><br/><br/>BLabla<br/><br/><br/>BLabla<br/><br/><br/>BLabla<br/><br/><br/>BLabla<br/><br/><br/>BLabla<br/><br/><br/>
    BLabla<br/><br/><br/>BLabla<br/><br/><br/>BLabla<br/><br/><br/>BLabla<br/><br/><br/>BLabla<br/><br/><br/>BLabla<br/><br/><br/>BLabla<br/><br/><br/>
</body>
</html>