Jquery: Scroll Bar does not scroll down to the end of the DIV loaded with the request . load

Question

Hi, boys from the O.R.! All right?

I need your help with Jquery so that the scrollbar of the div "conteudo2" scrolls to the end when you click on the "Open" button".

Simple, right? The problem is that when I load the content through the request . load, the scroll bar does not scroll until the end of the div.

When I do the same test with . append, I get success and scroll bar descends to the end without major problems.

$(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>

Note: No. Jsfiddle I provide the script with the 2 commands (.append and .load), but I could not load the contents in the command. load, because this command will load a second page, I couldn’t include this page in Jsfiddle for testing. So it won’t work in Jsfiddle. But if you try it locally, you’ll see that the scroll bar doesn’t go down until the end.

Help me fix the script with the . load command and make the scroll bar go down to the end?! And, if possible, explain to me why this happens?! Why it works with . append and not . load, if both load content in the div?

Link to the Jsfiddle: https://jsfiddle.net/Joka89/ge4yburk/7/

Thank you very much!

Answer 1

The correct is to use the callback of the method .load() and scroll after the request is completed:

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

In this case you don’t even need the .delay(1000), unless, even after the load returns, you want Animate to wait another 1 second to run.

The .load() is an Ajax request that is asynchronous with the rest of the code. When making the request the rest of the code will continue to be executed and when arriving at the Animate, the request has not yet been completed and the .scrollHeight shall have the value before the .load().

By making a .append() with for is different because the Animate will only run after the completion of the for. The for is synchronous.