J
JetLagFox
Gamma
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
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:
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?
Uso el siguiente script:
Insertar CODE, HTML o PHP:
<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?