Como rolar automaticamente até o final de uma div após a adição de dados

Ao trabalhar com conteúdo dinâmico da web, geralmente é desejável que elementos como divs rolem automaticamente para na parte inferior à medida que novos dados são adicionados. Este é um requisito comum para elementos como janelas de bate-papo ou tabelas de dados de rolagem infinita.

Considere um cenário em que você tem uma tabela incluída em um div com altura fixa e deseja que ela role automaticamente até o final quando novos dados são anexados. Este artigo explora uma solução JavaScript para alcançar esse comportamento.

Abordagem JavaScript

Usando um intervalo:

Se o momento da adição de dados for desconhecido, você pode definir um intervalo para atualizar periodicamente a propriedade scrollTop do div para corresponder ao seu scrollHeight. Isso garante que o div sempre rolará para baixo, mesmo se novos dados forem adicionados entre os intervalos.

window.setInterval(function() {
  var elem = document.getElementById('data');
  elem.scrollTop = elem.scrollHeight;
}, 5000);

Neste exemplo, a função setInterval é executada a cada 5 segundos (5.000 milissegundos) e atualiza a propriedade scrollTop do div com seu scrollHeight. Isso efetivamente rola o div até o final.

Implementação sob demanda:

Se você tiver controle sobre quando os dados são adicionados ao div, você pode implementar a rolagem comportamento manualmente chamando a seguinte função após adicionar novos dados:

function scrollToEnd(elem) {
  elem.scrollTop = elem.scrollHeight;
}

Esta função pega um elemento como argumento e define sua propriedade scrollTop como scrollHeight, o que rolará o elemento para baixo. Basta chamar esta função sempre que novos dados forem adicionados ao div para obter o efeito de rolagem automática desejado.