carregamento de postagens com o scroll do usuário

05/03/2021

6

como posso fazer um sistema de carregamento de conteúdo como o do "https://canaltech.com.br/", que o usuário chega no final dando scroll e carrega mais conteúdo sem precisar mudar de pagina, se possível ser na linguagem PHP.
Responder

Posts

07/03/2021

Heraldo Araujo

Olá, Mateus!


Bem, vamos por partes, pra vc fazer isso, antes, vc precisa de entender que o PHP sozinho não resolve. É tudo um truque de javascript+php+ajax;

Então, esse código abaixo, serve pra te mostrar como o browser saberá quando o scroller chegou ao fim(pertinho do fim, na verdade) para puder pedir ao ajax que execute um php e imprima mais elementos(quantos vc quiser);

Quando vc entender isso, é só fazer o ajax(eu indiquei onde deve ficar o ajax) e chamar o programa .php que devolverá os elementos(html) prontos para imprimir no final da página .

(estou supondo que vc manja de php e de ajax, se não for o caso, responde que eu vou te mostrando mais coisas ).






Aqui abaixo, arquivo html :





<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="ISO 8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nacionalidade</title>
<style>
</style>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

<div id="fix" style="position:fixed; background:#aaa; width:1000px; " >


</div>


<div id="roller">


<div style='width:1000px; height:100px; background:#ff8090 ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#8090ff ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#aa9292 ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#9394bb ;border:solid 5px #000; '></div>


<div style='width:1000px; height:100px; background:#ff8090 ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#8090ff ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#aa9292 ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#9394bb ;border:solid 5px #000; '></div>


<div style='width:1000px; height:100px; background:#ff8090 ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#8090ff ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#aa9292 ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#9394bb ;border:solid 5px #000; '></div>


<div style='width:1000px; height:100px; background:#ff8090 ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#8090ff ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#aa9292 ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#9394bb ;border:solid 5px #000; '></div>


</div>

<script>



$(document).ready(function() {

var contador = 0 ;
$(window).bind('scroll', function() {

var altura = $(window).scrollTop();
var offset = $('body').offset().top;
var altura1 = $('body').outerHeight();
var altura2 = window.innerHeight ;

var limite = offset + altura1 - altura2;

//*********************************************************************************************************************************
// esse trecho de código é só para você ver(em tempo real) os valores que precisamos capturar para obter momento de inserir novos elementos
//*********************************************************************************************************************************
$("#span1").remove();
$("#span2").remove();
$("#span3").remove();

$("#fix").append("<span id=span1> Altura do Scroll=>"+altura+"</span>");
$("#fix").append("<span id=span2> Limite da altura do Scroll=>"+limite+"</span>");
$("#fix").append("<span id=span3> Contador de novas inserções=>"+contador+"</span>");
//******************************************************************************************************************************



if ( altura > limite ) {

contador = contador + 1 // só para você entender que houve nova inserção

// É AQUI QUE VC DEVE INSERIR O AJAX PARA IMPRIMIR MAIS CONTEÚDO(ASSUNTO PARA OUTRA AULA, CASE SEJA NECESSÁRIO)


// forçar nova inserção de elementos
$("body").append("<div style='width:1000px; height:100px; background:#100966 ;border:solid 5px #000'></div>");
$("body").append("<div style='width:1000px; height:100px; background:#101234 ;border:solid 5px #000'></div>");
$("body").append("<div style='width:1000px; height:100px; background:#134482 ;border:solid 5px #000'></div>");
$("body").append("<div style='width:1000px; height:100px; background:#905574 ;border:solid 5px #000'></div>");
}


});


});





</script>

</body>
</html>

Responder

08/03/2021

Heraldo Araujo

Ah , esse código foi validado, pode executá-lo no seu servidor de internet.
Responder

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários. Para saber mais sobre o uso de cookies,
consulte nossa política de privacidade. Ao continuar navegando em nosso site, você concorda com a nossa política.

Aceitar