1

Oi, meninos da SO! Tudo bem?

Preciso da ajudinha de vocês com JQuery para que a barra de rolagem da div "conteudo2" role até o fim quando clicar no botão "Abrir".

Simples, né? O problema é que quando eu carrego o conteúdo através da requisição .load, a barra de rolagem não percorre até o final da div.

Quando eu faço o mesmo teste com .append, eu obtenho êxito e barra de rolagem desce até o fim sem maiores problemas.

$(function() {
$(".abrir").on('click', function(){

    $('#conteudo1').addClass('d-none');
    $('#conteudo2').removeClass('d-none');

    $( "#conteudo2" ).load( "pagina.html" );

    //Exemplo de uso com .append (Funciona corretamente)
    /*for(var i = 0; i < 1000; i++){            

        $( "#conteudo2" ).append( "<p>Teste</p>" );         

    }*/

    //scroll to last message
    $('#conteudo2').delay(1000).animate ({
      scrollTop: $('#conteudo2')[0].scrollHeight
    });

});

});

HTML

<div id="container">
<div id="conteudo1">
    <div class="abrir">Abrir</div>
</div>

<div id="conteudo2" class="d-none">
    <div id="resultado"></div>
</div>

Obs.: No JSFiddle eu disponibilizo o script com os 2 comandos (.append e .load), porém não consegui carregar o conteúdo no comando .load, pois como esse comando carregará uma segunda página, eu não consegui incluir essa página no JSFiddle para testes. Então não irá funcionar no JSFiddle. Porém se vocês tentarem local, vão ver que a barra de rolagem não desce até o final.

Me ajudem a consertar o script com o comando .load e fazer a barra de rolagem descer até o final?! E, se possível, me expliquem por que isso acontece?! Porque funciona com .append e não com .load, se ambos carregam conteudo na div?

Link do JSFiddle: https://jsfiddle.net/Joka89/ge4yburk/7/

Muito obrigada!

1
  • O método load da jQuery, realmente não funciona nestes sites tipo stackoverflow e jsfiddle, pois ele depende de duas páginas para seu funcionamento, o que estes sites não possibilitam. Quanto ao seu código, testei ele aqui na minha máquina e funcionou perfeitamente com o load assim como o scroll. Se você está utiizando o mesmo código que postou no jsfiddle, então tem que funcionar. O que você tem que certificar é se esta pagina.html tem conteúdo suficiente para fazer um scroll na div que carrega ela.
    – LeAndrade
    Commented 1/12/2018 às 17:21

1 Resposta 1

0

O correto é utilizar o callback do método .load() e fazer o scroll após a requisição ser completada:

$( "#conteudo2" ).load( "pagina.html", function(){
   //scroll to last message
   $('#conteudo2').animate ({
      scrollTop: $('#conteudo2')[0].scrollHeight
   });
} );

Neste caso nem precisa do .delay(1000), a não ser que, mesmo após o retorno do load, você queira que o animate ainda aguarde mais 1 segundo para ser executado.

O .load() é uma requisição Ajax que é assíncrona com o resto do código. Ao fazer a requisição o resto do código continuará a ser executado e ao chegar no animate, a requisição ainda não foi completada e o .scrollHeight terá o valor de antes do .load().

Ao fazer um .append() com for é diferente porque o animate só será executado após a conclusão do for. O for é síncrono.

2
  • Perfeito. Fui estudar para entender mais sobre callbacks. Eu tinha usado o .delay(1000) numa tentativa de esperar o conteúdo ser carregado para então ser exibido, pois imaginava que seria uma questão de sincronia. A sua explicação foi genial. Compreendi cada palavra. Melhor que isso, só dois disso haha Obrigada! ♥ Commented 2/12/2018 às 3:20
  • Tem que aprender. Muita coisa no jQuery possui callback.
    – Sam
    Commented 2/12/2018 às 3:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .