1

Preciso manter a página sempre com o scroll posicionado no final.

Usei esse código:

function scroll() {  
    var objScrDiv = document.getElementById("ultimalinha");  
    objScrDiv.scrollTop = objScrDiv.scrollHeight;  
}

Mas não acertei o funcionamento do getElementById("oquequerqueeucapture"); alguma dica?

2
  • 2
    A dificuldade é em saber qual elemento você precisa obter com getElementById()? Commented 16/04/2015 às 11:42
  • 1
    cin.ufpe.br/~ejgcs/ajax/2.3.htm olhe aqui se pode te ajudar com o getElementById.
    – Marconi
    Commented 16/04/2015 às 11:49

1 Resposta 1

3

Para forçares o teu elemento com o ID qualquerCoisa, que está a receber conteúdo, a ficar sempre com o scroll no fim, deverás chamar a tua função que leva o scroll para baixo após e sempre que adicionares conteúdo nesse elemento:

/* Função igual à tua, onde a chamada da mesma é que vai fazer a diferença.
 */
function updateScroll() {
    var element = document.getElementById("oTeuId");
    element.scrollTop = element.scrollHeight;
}

Exemplo

Exemplo também disponível no JSFiddle.

Vê o exemplo em baixo que simula a adição de conteúdos num elemento e depois chama a função que vai manter o scroll no fim:

function updateScroll() {
  var element = document.getElementById("oTeuId");
  element.scrollTop = element.scrollHeight;
}

// primeira chamada ao carregar a página
updateScroll();

// adicionar conteúdo, simulando chamada Ajax
i = 5;

function minhaChamadaAjax() {

  i++;

  var div = document.getElementById("oTeuId");

  // mais conteúdo para o elemento
  var oNewP = document.createElement("p");
  var oText = document.createTextNode(i + " Nunc tristique, justo ac fermentum tincidunt, erat eros dignissim mauris, id molestie tortor risus vel eros. Donec nulla est, condimentum id auctor ac, fringilla non elit. Ut eu diam tincidunt, dapibus neque ut, iaculis tortor. Nunc congue nisl a diam luctus, id consequat ante aliquet. Donec elit mauris, aliquam vel cursus quis, vulputate lacinia turpis. Curabitur semper justo ante, a suscipit nisi laoreet at. Nam laoreet maximus turpis, ut luctus tortor finibus sit amet. Donec nec tristique leo. Fusce sollicitudin molestie lectus vitae pulvinar. Suspendisse quis arcu blandit, ultricies lacus vitae, maximus eros.");
  oNewP.appendChild(oText);
  div.appendChild(oNewP);

  // chama atualização do scroll
  updateScroll();
}
var timerId = window.setInterval(minhaChamadaAjax, 1000);

// parar a demonstração ao fim de 10 segundos (ainda estás a observar?)
setTimeout(function() {
  clearInterval(timerId)
}, 10000);
html,
body {
  height: 100%;
  overflow: hidden;
}
#oTeuId {
  border: 1px solid #ccc;
  height: 80%;
  overflow-y: scroll;
}
<div id="oTeuId">
  <p><strong>1</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis sagittis ipsum, eget posuere ligula tincidunt in. Etiam ut urna in justo tincidunt pretium. Aenean aliquam enim sed urna euismod, sed fermentum nibh consequat. Phasellus egestas lacus in erat pretium, in imperdiet lacus aliquam. Phasellus vehicula mi eu justo congue vestibulum. Etiam egestas nulla libero, ut hendrerit ante ornare nec. Phasellus tempor mi sed nunc elementum ullamcorper. Aliquam erat volutpat. Sed finibus suscipit ex. Etiam posuere sapien a urna rutrum varius. Praesent pulvinar sapien mauris, at finibus diam facilisis at. Fusce congue neque ullamcorper, luctus dui id, gravida nisl. Pellentesque feugiat congue magna, ut elementum lectus varius non. Nulla facilisi. Phasellus condimentum hendrerit finibus. In tincidunt tempus felis quis gravida.</p>
  <p><strong>2</strong> Nulla in mi a arcu hendrerit euismod. Duis sed mi diam. Sed sagittis elit sapien. In rhoncus dictum mauris, at semper lacus interdum eu. Aenean a velit sit amet lectus mollis molestie. Ut viverra pharetra diam, ac egestas ipsum elementum eget. Integer id dictum velit, ut finibus nulla. Fusce malesuada felis eu dui fermentum posuere eget at erat. Morbi facilisis arcu nec imperdiet venenatis. Nunc tempor quam ac nunc condimentum maximus. Pellentesque dolor sem, mattis a libero iaculis, cursus tristique mauris. Pellentesque hendrerit leo quis semper suscipit. Aliquam tincidunt tortor id tristique accumsan. Curabitur commodo ante eu nunc egestas, id consequat quam porttitor. Cras a ipsum eu ante rutrum finibus vitae et erat.</p>
  <p><strong>3</strong> Praesent quis ipsum id dolor iaculis egestas. In hac habitasse platea dictumst. Aliquam malesuada nunc sit amet dictum consequat. Morbi eget nulla pellentesque, consequat purus quis, rhoncus nisl. Morbi tempor leo eu eros finibus vehicula quis eu ligula. Phasellus odio nulla, maximus et tristique ut, rutrum at mi. Fusce et tincidunt odio. Maecenas semper lectus et hendrerit cursus. In pharetra luctus eros, in pretium mi convallis sit amet. Integer facilisis felis et lacus faucibus, at mattis diam blandit. Maecenas eu erat non metus tincidunt aliquam sit amet vitae diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec commodo consequat aliquet. Nulla tortor est, sodales et ullamcorper in, semper a ligula. Aliquam congue dui nec porta dapibus.</p>
  <p><strong>4</strong> Suspendisse feugiat sapien eu ipsum accumsan suscipit. Vestibulum fermentum fringilla ligula, id iaculis elit posuere sed. Vivamus eu imperdiet nisi. Phasellus vulputate posuere enim ac commodo. Suspendisse ac nisi eget turpis porttitor feugiat eu et diam. Vestibulum commodo turpis et leo lobortis, in efficitur libero pulvinar. Nunc mollis ligula ut tortor congue tristique.</p>
  <p><strong>5</strong> Proin eu purus eget nunc mollis convallis ac eget dolor. Duis mollis ultrices posuere. Pellentesque finibus dui in neque tristique interdum. Vestibulum iaculis, diam in pharetra fermentum, velit metus dapibus justo, finibus sodales ipsum sem nec sem. Aliquam scelerisque lobortis eros, vel sodales enim rutrum sit amet. Duis semper metus justo, ultrices iaculis quam rhoncus ut. Aenean vel feugiat lacus. Donec a magna vel nulla porta imperdiet eleifend non nisi.</p>
</div>

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 .