2

Estoy intentando realizar una prueba para hacer mi web con scroll infinito, y cargue contenido segun hace scroll hacia abajo. Me ocurre que con el metodo que veo en todos los sitios, me inserta la linea cuando llego arriba del todo, osea tengo que bajar (no hace nada), pero si subo al principio del todo me la inserta justamente cuando llego ahí.

$(window).scroll(function () {
    if ($(window).scrollTop() + $(window).height() == $(document).height()){ 
        $("body").append('NUEVALINEA<br>');
    }
});

Al parecer me ocurre porque el resultado del IF da 0, esta cogiendo el mismo valor $(window).height() y $(document).height(). (Y no deberia ser así).
Gracias por la ayuda!
Saludos!

1 respuesta 1

1

Muchas veces el valor de $(window).scrollTop() + $(window).height() puede ser menor en 0.5 al de $(document).height() por lo que tu condición no se cumplirá, para solucionar esto podríamos agregar un "offset" y de paso aprovechamos para que los elementos empiecen su carga antes que el usuario llegue al final de la página

$(window).scrollTop() + $(window).height() >= $(document).height() - 50

Un consejo, no es recomendable agregar funciones directamente al scroll, de hecho algunos navegadores despliegan un aviso alertando que esto puede afectar el rendimiento.

Te sugiero agregar una bandera que nos indique si se ha hecho scroll y realizar una acción dependiendo del valor de esta:

var didScroll = false;

// Agregamos un listener al scroll para asignar el valor a la bandera
$(window).scroll(function() {
  didScroll = true;
});

// Declaramos una función que esté llamando cada cierto tiempo para actualizar el estado dependiendo de la bandera
setInterval(function() {
  if (didScroll) {
    if ($(window).scrollTop() + $(window).height() >= ($(document).height() - 50)) {
      $('body').append('<p>Soy un texto nuevo!</p>');
      didScroll = false;

    }
  }
}, 250);
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1>Haz scroll :)</h1>
<p>Soy un texto</p>
<p>Soy un texto</p>
<p>Soy un texto</p>
<p>Soy un texto</p>
<p>Soy un texto</p>
<p>Soy un texto</p>
<p>Soy un texto</p>
<p>Soy un texto</p>
<p>Soy un texto</p>
<p>Soy un texto</p>
<p>Soy un texto</p>
<p>Soy un texto</p>
<p>Soy un texto</p>
<p>Soy un texto</p>
<p>Soy un texto</p>
<p>Soy un texto</p>
<p>Soy un texto</p>
<p>Soy un texto</p>
<p>Soy un texto</p>
<p>Soy un texto</p>
<p>Soy un texto</p>

1
  • Gracias, probado y funcionando!! Commented el 9 jun. 2018 a las 19:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.