Scroll test

by Emily Humphrey

HTML

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>

SCSS

html, body{
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
%box{
    display: block;
    width: 100%;
    height: 100%;
}
.a{
    @extend %box;
    background: #D9CEB2;
}
.b{
    @extend %box;
    background: #D5DED9;
}
.c{
    @extend %box;
    background: #948C75;
}
.d{
    @extend %box;
    background: #99B2B7;
}

JavaScript

var w = $(window);
var height = w.height();
var scrolledAmount = 0;
var scrolledNeeded = 2;
var scrollActive = false;
var timeout;


w.bind("mousewheel DOMMouseScroll", function(e){
    console.log(w.scrollTop());
    
        e.preventDefault();
    console.log(scrolledAmount+"/"+scrolledNeeded);
    if(scrollActive === false && scrolledAmount < scrolledNeeded){
        e.preventDefault();
        //return false;
        scrollActive = true;
        console.log("scrollActive = "+scrollActive);
        scroll();
        timeout = setTimeout(function(){
            scrollActive = false;
            console.log("scrollActive = "+scrollActive);
            clearTimeout(timeout);
        }, 1000);
    } else if(scrolledAmount < scrolledNeeded){
        e.preventDefault();
    }
    else{
    }
    
});

function scroll(){
    scrolledAmount++;
    $("html, body").animate({ scrollTop: (height*scrolledAmount)+"px" }, 300);
}