1

Tenho uma div chat-history com atributo overflow-y:scroll. Através do jQuery eu insiro informações no banco de dados e depois atualizo para exibir na div chat-history. Preciso que ao atualizar a div via requisição Ajax, a mesma fique com o foco na ultima linha da barra rolagem.

Segue trecho do código que faz a atualização da div logo após a inserção dos dados no banco.

function atualiza(){
  $.get(''+ url +'/chat-history', function(result){
  $('.chat-history').html(result);
})
 setTimeout('atualiza()', 3000);
 $('#message-to-send').val('');
 $('#sendMessage').attr("disabled", false);

 //neste momento a div chat-history que está com scroll deve ter seu foco na última linha
}

Tentei

$('html, body').animate({ scrollTop: $('.chat-history').offset().bottom }, 300);

Mas não tive o resultado esperado

1
  • Bem, se o scroll está no .chat-history, você deve chamar o animate no mesmo. Pode postar o código para que possamos lhe sugerir algo com mais precisão?
    – LF Ziron
    Commented 12/04/2016 às 8:30

1 Resposta 1

2

Você tem de passar o scrollHeight para o scrollTop do animate, e o seletor deve ser no elemento que irá sofrer a animação:

$('.chat-history').animate({ scrollTop: $('.chat-history')[0].scrollHeight }, 300);

scrollHeight: É um atributo read-only que retorna a altura de um conteúdo de elemento, includindo conteúdo não visíveis.

scrollTop: rola o scroll do elemento para posição definida, a partir do elemento passado via seletor.

Segue jsfiddle.

2
  • Perfeito, mas pode explicar a scrollTop e scrollHeight?
    – Dagobe
    Commented 12/04/2016 às 13:42
  • @Dagobe, editei a resposta :)
    – Brunno
    Commented 12/04/2016 às 13:51

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 .