2

Tenho uma div que deve fazer um append de alguns elementos e, após isso, deve fazer um scroll até o final dela.

O problema é que o scroll é executado antes do append ser finalizado. O código (genérico) está assim:

$("div").append(output);
$("div").prop("scrollTop", $("div").prop("scrollHeight"));

Se eu colocar o segundo comando dentro de um setTimeout, isso tudo funciona, mas as vezes o tempo de append pode variar e acabar sendo maior do que o tempo que defini no setTimeout e de novo não vai executar o segundo comando.

O que acontece é que, como o primeiro comando não foi completo, o segundo não tem conteúdo para dar scroll, pois os comandos vão seguindo, sem terem necessariamente terminado.

O que eu preciso é de algum tipo de verificação que observa se o append foi finalizado, ou algo assim, para o código poder continuar. E a função com esses comandos só é chamada uma vez.

2 Respostas 2

3

Infelizmente o método append() não tem um callback p/ verificar se foi feito ou não, logo surgem as alternativas de usar setTimeout, mas como no seu caso tu disse que pode variar muito, tenta usar a função animate da seguinte forma:

$('#append').click(function() {

  $('#divUm').append('<div style="height:800px; border:2px solid red;"></div>');

  $('#divUm').animate({
    scrollTop: $('#divUm').prop("scrollHeight")
  }, 1500);

});
#divUm {
  height: 300px;
  padding: 20px;
  background-color: grey;
  overflow-y: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="append">append</button>
<div id="divUm">divUm</div>

4
  • Infelizmente esse modo não funcionou. Inclusive, eu já havia tentado, sem sucesso.
    – Marlon
    Commented 6/04/2017 às 20:54
  • @MarlonLuís se tiver como postar mais detalhes, a div e o conteúdo do append, pode ser no jsfiddle.net, vamos atrás da solução.
    – Mathiasfc
    Commented 6/04/2017 às 20:58
  • Tudo bem, @Mathias, consegui resolver o problema e postei o resultado abaixo.
    – Marlon
    Commented 6/04/2017 às 21:01
  • @MarlonLuís Maravilha, que bom que conseguiu responder, espero que a minha resposta seja mais útil em uma próxima vez, até cogitei em sugerir o setInterval mas achei meio perigoso, enfim que bom que funcionou.
    – Mathiasfc
    Commented 6/04/2017 às 21:28
2

Descobri um modo de fazer a verificação de append para uma div que usa overflow, abaixo:

var intervalo = setInterval(function() {
    // Quando achar algo dentro da div
    if ($("div").children().length > 0) {
        // No meu caso, gostaria que o scroll rolasse até o final
        $("div").prop("scrollTop", $("div").prop("scrollHeight"));
        // Cancela o setInterval
        clearInterval(intervalo);
    }
}, 1);

Pode-se colocar outro valor ao invés de 1 para o intervalo. Quando ele verificar que houve o aumento de tamanho do scroll ele para a verificação e o código continua.

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 .