1

Estoy intentando hacer funcionar un scroll infinito para una sección de noticias. Lo que quiero es que al llegar a cierto punto del scroll se me añada otro bloque de noticias, si el usuario llega al final del scroll se vuelva a añadir otro. Así hasta que ya no haya más noticias que mostrar.

Uso el siguiente <script>:

<script language="JavaScript">

var paginacion = 2
window.addEventListener("scroll", function(){
    console.log(scrollY);
    var altura_header = $("header").height();
    var altura_bloque_anuncio = $("#anuncio_primero_home").height();
    var altura_div_noticias = $(".cont-princ").height();
    var altura_limite = altura_header + altura_bloque_anuncio + altura_div_noticias;
    //OJO PORQUE NO SÉ SI FUNCIONA CON LA RESOLUCIÓN DE PANTALLA, IGUAL HABRÍA QUE SACAR LA ALTURA DE SU NAVEGADOR
    var altura_pantalla_usuario = screen.height;
    var altura_nagegador = $(window).height();
    var altura_nagegador_2 = $(document).height()


    console.log(this.scrollY + altura_pantalla_usuario);
    //tendrá que buscar si hay más noticias cuando lo que baje en pixeles el usuario con el scroll, más la altura de su pantalla, supere el la variable altura_limite

    if (this.scrollY + altura_pantalla_usuario >= altura_limite){
        $.ajax ({
          type: 'POST',
          url: '<?php echo $ruta ?>proces_noticias.php',
          data: { "paginacion": paginacion},
          success:function(datos){
            $("#mas_noticias").html(datos);
          }
        });

        paginacion = paginacion + 1;
    }
    console.log("Esto es paginacion:" + paginacion )
    console.log("Esto es la altura limite:" + altura_limite ) 

}, false);

</script>

Y muestro los datos en un div que de un inicio está vacío:

<div id="mas_noticias" style="width:100%;">

</div>

Al cargar la página y hacer scroll hacia abajo funciona bien, se me carga otro bloque de noticias, justo las siguientes, pero si sigo haciendo scroll, no se me carga otro bloque nuevo a continuación, se me actualiza el div anterior con las noticias.

¿Cómo puedo hacer para que en vez de actualizarme el div donde se muestran por AJAX los resultados se me añada otro? ¿Debería usar mejor un class en vez de un id por eso de que los id no se pueden repetir?

1 respuesta 1

1

prueba en lugar de $("#mas_noticias").html(datos); utilizar $("#mas_noticias").append(datos);

jQuery Add Elements

Suponiendo que el div donde están las noticias se llame "div_noticias" también lo podrías hacer de la siguiente forma (si el scroll está en el div):

<script language="JavaScript">
  $(document).ready(function(){
  
    var paginacion = 2

    $('#div_noticias').bind('scroll', function() {
      if($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) {
      
        $.ajax ({
          type: 'POST',
          url: '<?php echo $ruta ?>proces_noticias.php',
          data: { "paginacion": paginacion},
          success:function(datos){
          
            $("#div_noticias").append(datos);
            
          }
        });
        
        paginacion = paginacion + 1;
        
      }
    });
  });
</script>

jQuery scrollTop() Method

jQuery innerHeight() Method

HTML DOM scrollHeight Property

Si el scroll está en la página:

<script language="JavaScript">
  $(document).ready(function(){
  
    var paginacion = 2

    $(document).bind('scroll', function() {
      if($(window).scrollTop() + $(window).innerHeight() >= $(document).height()) {
      
        $.ajax ({
          type: 'POST',
          url: '<?php echo $ruta ?>proces_noticias.php',
          data: { "paginacion": paginacion},
          success:function(datos){
          
            $("#div_noticias").append(datos);
            
          }
        });
        
        paginacion = paginacion + 1;
        
      }
    });
  });
</script>

9
  • Gracias, algo ha cambiado. El problema que le veo es que me carga todos los bloques de golpe al hacer scroll.
    – user27826
    el 14 ago. 2017 a las 0:51
  • Es realmente necesario que se carguen los bloques al llegar a cierta parte del scroll y luego al final? No puede ser solamente al llegar al final?
    – Winston
    el 14 ago. 2017 a las 1:13
  • Bueno esa parte cierta del scroll en realidad pretende ser el final, pero lo hago con cálculos. No sé si habrá otra forma más sencilla de hacerlo.
    – user27826
    el 14 ago. 2017 a las 1:18
  • Edito la respuesta, agrego la forma como lo hago en un proyecto mío, siempre que llega al final del div hace una nueva solicitud y carga los datos al final.
    – Winston
    el 14 ago. 2017 a las 1:42
  • Lo he probado aunque no me funciona. No carga nada vaya aunque llegue al final del scroll.
    – user27826
    el 14 ago. 2017 a las 1:45

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies