Scroll's are forever

by Darby Rathbone

HTML

<div id='container'>
    <div class='page'>
        <img src="http://pipsum.com/500x500.jpg?1" alt="" />
    </div>
    <div class='page'>
        <img src="http://pipsum.com/500x500.jpg?2" alt="" />
    </div>
    <div class='page'>
        <img src="http://pipsum.com/500x500.jpg?3" alt="" />
    </div>
    <div class='page'>
        <img src="http://pipsum.com/500x500.jpg?4" alt="" />
    </div>
    <div class='page'>
        <img src="http://pipsum.com/500x500.jpg?5" alt="" />
    </div>
</div>

CSS

html {
    overflow: hidden;
}
body {
    overflow:hidden;
}
* {
    margin:0px;
    padding:0px;
}
div.page {
    position:relative;
    overflow:hidden;
    width:100%;
    height:100%;
    display:block;
}
img {
    width:100%;
    height:100%;
}
span.overlay {
    text-align: center;
    width:100%;
    vertical-align:middle;
    height:100%;
    top:0px;
    line-height:100%;
    position:absolute;
    display:block;
    color:rgba(255, 0, 0, .25);
}
#container {
    height:100%;
    position: absolute;
    left: 0px;
    top: 0px;
    right: -30px;
    padding-right: 15px;
    overflow-y: scroll;
}

JavaScript

var divs = [].slice.call(document.getElementsByClassName('page'));
var snapEachPage = false;
divs.forEach(function (e, i) {
    var span = document.createElement('span');
    span.innerHTML = i + 1;
    // span.style = 'width:100%;height:100%;position:absolute;display:block;z-index:1;top:0px;';
    span.classList.add('overlay');
    e.insertBefore(span, e.firstChild);
});
divs[0].parentElement.insertBefore(divs[divs.length - 1].cloneNode(true), divs[0]);
divs[0].parentElement.appendChild(divs[0].cloneNode(true));
var scrolled = 0;
divs[0].parentElement.scrollTop = window.innerHeight;
divs[0].parentElement.addEventListener('scroll', scrollFunction);

function scrollFunction(e){
    requestAnimationFrame(function(){
        console.log((divs[0].parentElement.scrollTop - window.innerHeight));
        if(Math.abs(divs[0].parentElement.scrollTop - window.innerHeight)>15)
        {
        scrolled += 45*((divs[0].parentElement.scrollTop - window.innerHeight)/Math.abs((divs[0].parentElement.scrollTop - window.innerHeight)));
        }
        else {
         scrolled +=(divs[0].parentElement.scrollTop - window.innerHeight);   
        }
    if (scrolled < 0) {

        scrolled += window.innerHeight * (divs.length);
     }
    if (scrolled > window.innerHeight * (divs.length)) {

        scrolled = (scrolled % window.innerHeight);
    }
    console.log(scrolled);
    if (snapEachPage) {
        [].slice.call(document.getElementsByClassName('page')).forEach(function (e) {
            e.style.transform = 'translate(0px,' + -1 * (Math.round(scrolled / window.innerHeight) * window.innerHeight) + 'px)';
        });
    } else {
        [].slice.call(document.getElementsByClassName('page')).forEach(function (e) {
            e.style.transform = 'translate(0px,' + -1 * scrolled + 'px)';
        });
    } //console.log(top);
    divs[0].parentElement.scrollTop = window.innerHeight;
    });
    }
               
function resizer(e) {

   ...