Full Page Scroll

by surfine

HTML

<div class="section" style="background: #26A69A"></div>
<div class="section" style="background: #009688"></div>
<div class="section" style="background: #00897B"></div>
<div class="section" style="background: #00796B"></div>
<div class="debug">
    <i></i>/<i></i>/<i></i> - <i></i>
</div>

CSS

body,
html {
    height: 100%;
    width: 100%;
}

.section {
    height: 100%;
}

.debug {
    position: fixed;
    bottom: 10px;
    right: 10px;
}

i {
    margin: 0 3px;
}

JavaScript

var lastScrollTop = 0;
var dir = 'down';
var pagenum = $('.section').length;
var currentpage  = 0;
var animating = false;

 $(window).bind('mousewheel', function(event) {
 
    var st = $(this).scrollTop();
    
    if (event.originalEvent.wheelDelta <= 0) {
        dir = 'down';
    } else {
        dir = 'up';
    }
    
    var prevpage = currentpage -1;
    var nextpage = currentpage +1;
    
    if (prevpage <= 0) {
    	prevpage = 0;
    }
    if (nextpage >= pagenum) {
    	nextpage = pagenum -1;
    }
    
    
    if (dir === 'down' && animating === false) {
        animating = true;
    	$('html, body').stop().animate({
        	scrollTop: $('.section').eq(nextpage).offset().top
        }, 1000, function(){
            animating = false;
        });
        if (currentpage < pagenum -1) { currentpage++; }
    }
    
    if (dir === 'up' && animating === false) {
        animating = true;
    	$('html, body').stop().animate({
        	scrollTop: $('.section').eq(prevpage).offset().top
        }, 1000, function(){
            animating = false;
        });
        if (currentpage > 0) { currentpage--; }
    }
    
    $('i').eq(0).html(pagenum);
    $('i').eq(1).html(currentpage);
    $('i').eq(2).html(nextpage);
    $('i').eq(3).html(st+'/'+lastScrollTop+'/'+dir);
    
    lastScrollTop = st;
});