JavaScript onScroll end, trigger action

Scroll down, slowly, back to top, refresh, repeat

by Salustiano Silva

HTML

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

CSS

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

JavaScript

function scrollDiv() {

    function scrollMe() {

        myDiv.scrollTop = i;

        if (status == 0) {
            i = i + 1;
            if (i >= Height) {
                status = 1;
            }
        }

        setTimeout(scrollMe, 50);
    }

    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(); Disabled otherwise we're on an infinite pain-in-the-ass loop
    }
};