Automatic scrollbar

Navigation
4

Good morning!

I have the following question, I need the bar to go down to the bottom of the page as a monitoring system, I need to come back to the top and give me a refresh. Can I get this using javascript?

Thanks in advance.

    
asked by anonymous 13.04.2015 / 16:02

1 answer

6

With JavaScript, you can detect when scrolling for a particular element has come to an end and then force the scroll to the top and trigger the current page load, making use of the onscroll " of the element in question and then use:

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 to the end → back to top → Reload page → repeat

The following is an example of how to scroll the element continuously to the end of the element, then go to the top and force page loading:

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 with the code a bit to achieve your goal, where you should increase the number of pixels to move or reduce the waiting time between calls of the scrolling function.

With the combination of both you can get a faster, less rapid, smoother, less smooth roll.

Special attention to the commented lines from the above example presented.

    
13.04.2015 / 16:36
How do I use replace () for the last occurrence? Sorting numbers without repeating in javascript [duplicate]