JavaScript - Keep Scroll at the end

by Salustiano Silva

HTML

<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...

CSS

html, body {
    height: 100%;
    overflow: hidden;
}
#oTeuId {
    border:1px solid #ccc;
    height: 80%;
    overflow-y: scroll;
}

JavaScript

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);