3

Estou querendo que uma determinada div, que possua o atributo overflow-y:auto, cuja altura é fixa, seja rolada ao final, assim que um elemento é acrescentado nela.

Nesse caso, preciso que ela role até o final, pelo fato de sua altura ser fixa, porém não é fixa a quantidade de elementos dentro dela. Ou seja, assim que um elemento é adicionado com um append, preciso que o scroll role até o final dessa div.

Atualmente, consigo fazer isso facilmente com a função scrollTop, porém acho que definir o valor como 9999999 seja muita gambiarra muito deselegante.

Veja algo aproximado do que tenho:

$(function()
{
  $('#div').animate({scrollTop: 9999999}, 500);
});
#div{
  
   height:150px;
   background: tomato;
   overflow-y: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='div'>
  <li>Conteúdo</li>
  <li>Conteúdo</li>
  <li>Conteúdo</li>
  <li>Conteúdo</li>
  <li>Conteúdo</li>
  <li>Conteúdo</li>
  <li>Conteúdo</li>
  <li>Conteúdo</li>
  <li>Conteúdo</li>
  <li>Conteúdo</li>
  <li>Conteúdo</li>
  <li>Conteúdo</li>
</div>

  • Como faço para rolar essa div até o final, sem ter que utilizar o método atual descrito acima?

  • Como saber o tamanho do scroll dessa div?

2 Respostas 2

5

Tente usar o scrollHeight, que é uma propriedade apenas leitura que dá a medida do conteúdo do elemento:

var div = $('#div')[0];
div.scrollTop = div.scrollHeight;

Fonte e Fiddle.

Usando apenas jQuery:

var div = $('#div');
div.prop("scrollTop", div.prop("scrollHeight"));

Fiddle.

7
  • Pra ficar "mais jQuery", será que eu posso utilizar o prop para não ter que acessar os elementos assim? 1/09/2015 às 13:08
  • 1
    Sim, pode: $('#div').scrollTop($('#div').prop("scrollHeight")); 1/09/2015 às 13:10
  • @WallaceMaxters sim: jsfiddle.net/7Lv29w75/1 1/09/2015 às 13:11
  • @WallaceMaxters não sei, não vejo essa prática por aqui nem no SO gringo. Geralmente é colocado apenas no link e no caso o MDN é confiável. 1/09/2015 às 13:17
  • 2
    Esse resumindo já dá um grau. As vezes uma explicação longa é ignorada por quem está querendo aprender (principalmente eu) 1/09/2015 às 13:18
3

Você pode fazer assim:

$('#div').animate({scrollTop: $('#div')[0].scrollHeight}, 500);

Pen: http://codepen.io/raftelti/pen/EVxQXL

1
  • O OP realmente usou animate, boa observação. 1/09/2015 às 13:13

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 .