Automatic scroll bar

Question

Good morning!

I have the following question, I need the bar to go down to the end of the page as a monitoring system, I need to get to the end of it to go back to the top and give a refresh. I can do this using javascript?

Thanks in advance.

Answer 1

With Javascript, you can detect when the scrolling of a particular element has come to an end and at that point force the scrolling to the top and trigger the loading of the current page, making use of the property onscroll and then use:

• scrollTop to send to the desired roll position;
• location.reload() to reload the current page.

Relevant code

// apanhar o elemento a monitorizar pelo seu ID
var myDiv = document.getElementById("myDiv");

// Utilizar a propriedade "onscroll" para executar o código
myDiv.onscroll = function() {

    // Detetar se estamos no fim
    if (myDiv.offsetHeight + myDiv.scrollTop >= myDiv.scrollHeight) {

        // Enviar para o topo
        myDiv.scrollTop = 0;

        // Recarregar página atual
        location.reload();
    }
};

Example

Example also available on Jsfiddle.

var myDiv = document.getElementById("myDiv");

myDiv.onscroll = function() {

    if (myDiv.offsetHeight + myDiv.scrollTop >= myDiv.scrollHeight) {

        myDiv.scrollTop = 0;

        location.reload();
    }
};

html, body {
    width:100%;
    height:100%;
    overflow:hidden;
}
div {
    height:300px;
    width:50%;
    overflow:scroll;
}

<div id="myDiv">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consequat ante nec ipsum condimentum mollis. Sed ullamcorper gravida sapien, ac bibendum nunc bibendum non. Nunc pellentesque molestie ipsum, a volutpat dui finibus sed. Aliquam maximus quis justo tempor dictum. In hac habitasse platea dictumst. Integer at viverra ligula. Suspendisse rhoncus pellentesque pharetra. Pellentesque consequat justo lectus, et tempor mauris euismod vel. Sed facilisis urna nec enim finibus feugiat. Nam cursus in lorem non molestie. Quisque egestas interdum facilisis. Donec ultrices vel est et pharetra.

Vivamus faucibus non turpis non molestie. Pellentesque dictum libero et lectus porta, eu aliquet elit lacinia. Cras ac volutpat mi. Phasellus mollis in tellus at bibendum. Suspendisse lobortis lacinia nisl, ac gravida risus maximus in. Nunc sodales aliquam porta. Praesent tempor ex vel faucibus finibus. Vestibulum libero felis, vulputate fringilla velit in, pulvinar tincidunt mauris. Nam convallis est aliquam efficitur maximus.

Donec iaculis urna eu massa suscipit, a volutpat justo iaculis. Fusce dictum turpis tellus, at tristique orci hendrerit ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In facilisis sagittis justo sit amet egestas. Suspendisse sed gravida nisl. Pellentesque ipsum dolor, convallis ut gravida in, eleifend a dolor. Morbi eget ullamcorper enim. Phasellus elementum eleifend nunc, eu varius justo condimentum ut. Sed luctus velit felis, congue gravida ligula iaculis ac. Praesent auctor ipsum in quam sodales sollicitudin.

Vestibulum at ligula a nibh feugiat malesuada sit amet non massa. Nam viverra mi id enim laoreet dapibus. Sed feugiat efficitur elementum. Morbi convallis arcu ipsum, et molestie eros dapibus eget. Duis malesuada justo a odio blandit blandit. Aenean commodo egestas viverra. Sed luctus, augue eu gravida luctus, nisi eros eleifend urna, ac ultricies nisl odio sit amet metus. Vestibulum tincidunt urna ac hendrerit facilisis. Curabitur aliquet commodo dolor a tempus.

Vestibulum efficitur elit ultrices justo feugiat fermentum. Etiam iaculis ipsum nisi, ullamcorper ornare est venenatis a. Proin sed semper eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam lacinia dignissim enim, a lacinia justo faucibus sed. Mauris luctus in lacus sit amet rutrum. Pellentesque vitae tellus sit amet elit aliquam gravida. Proin ut efficitur nibh. Aenean eu elit lacus. Praesent lectus neque, pulvinar vel magna vitae, ornare malesuada eros. Proin posuere dui nec risus bibendum, in accumsan neque venenatis. Morbi nunc lectus, elementum in augue id, placerat dapibus lacus. </div>

---

Scroll all the way back to top Reload Repeat Page

Upon request, follows an example of how to scroll the element continuously until the end of the same, then going to the top and forcing loading of the page:

Example also available on Jsfiddle.

function scrollDiv() {

    function scrollMe() {

        myDiv.scrollTop = i;

        if (status == 0) {
            i = i + 1; // número pixeis a deslocar
            if (i >= Height) {
                status = 1;
            }
        }

        setTimeout(scrollMe, 50); // velocidade da chamada
    }

    scrollMe();
}

var myDiv  = document.getElementById("myDiv"),
    Height = myDiv.scrollHeight,
    i      = 1,
    j      = Height,
    status = 0;

scrollDiv();

myDiv.onscroll = function () {

    if (myDiv.offsetHeight + myDiv.scrollTop >= myDiv.scrollHeight) {

        myDiv.scrollTop = 0;

        //location.reload(); Desligado para não entrar num loop infinito na demonstração
    }
};

html, body {
    width:100%;
    height:100%;
    overflow:hidden;
}
#myDiv {
    height:300px;
    width:50%;
    overflow:scroll;
}

<div id="myDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consequat ante nec ipsum condimentum mollis. Sed ullamcorper gravida sapien, ac bibendum nunc bibendum non. Nunc pellentesque molestie ipsum, a volutpat dui finibus sed. Aliquam maximus quis justo tempor dictum. In hac habitasse platea dictumst. Integer at viverra ligula. Suspendisse rhoncus pellentesque pharetra. Pellentesque consequat justo lectus, et tempor mauris euismod vel. Sed facilisis urna nec enim finibus feugiat. Nam cursus in lorem non molestie. Quisque egestas interdum facilisis. Donec ultrices vel est et pharetra. Vivamus faucibus non turpis non molestie. Pellentesque dictum libero et lectus porta, eu aliquet elit lacinia. Cras ac volutpat mi. Phasellus mollis in tellus at bibendum. Suspendisse lobortis lacinia nisl, ac gravida risus maximus in. Nunc sodales aliquam porta. Praesent tempor ex vel faucibus finibus. Vestibulum libero felis, vulputate fringilla velit in, pulvinar tincidunt mauris. Nam convallis est aliquam efficitur maximus. Donec iaculis urna eu massa suscipit, a volutpat justo iaculis. Fusce dictum turpis tellus, at tristique orci hendrerit ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In facilisis sagittis justo sit amet egestas. Suspendisse sed gravida nisl. Pellentesque ipsum dolor, convallis ut gravida in, eleifend a dolor. Morbi eget ullamcorper enim. Phasellus elementum eleifend nunc, eu varius justo condimentum ut. Sed luctus velit felis, congue gravida ligula iaculis ac. Praesent auctor ipsum in quam sodales sollicitudin. Vestibulum at ligula a nibh feugiat malesuada sit amet non massa. Nam viverra mi id enim laoreet dapibus. Sed feugiat efficitur elementum. Morbi convallis arcu ipsum, et molestie eros dapibus eget. Duis malesuada justo a odio blandit blandit. Aenean commodo egestas viverra. Sed luctus, augue eu gravida luctus, nisi eros eleifend urna, ac ultricies nisl odio sit amet metus. Vestibulum tincidunt urna ac hendrerit facilisis. Curabitur aliquet commodo dolor a tempus. Vestibulum efficitur elit ultrices justo feugiat fermentum. Etiam iaculis ipsum nisi, ullamcorper ornare est venenatis a. Proin sed semper eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam lacinia dignissim enim, a lacinia justo faucibus sed. Mauris luctus in lacus sit amet rutrum. Pellentesque vitae tellus sit amet elit aliquam gravida. Proin ut efficitur nibh. Aenean eu elit lacus. Praesent lectus neque, pulvinar vel magna vitae, ornare malesuada eros. Proin posuere dui nec risus bibendum, in accumsan neque venenatis. Morbi nunc lectus, elementum in augue id, placerat dapibus lacus.</div>

You can "play" a little with the code to achieve your goal, where for this purpose you should increase the number of pixels to move or reduce the waiting time between calls of the function that scrolls.

With the combination of both you can get faster, faster, smoother, less smooth scrolling.

Special attention to the commented lines of the above example.