JSFiddle - React, Tailwind, and code Playground

HTML

<div class="section" id="section1">Section 1</div>
    <div class="section" id="section2">Section 2</div>
    <div class="section" id="section3">Section 3</div>
    <div class="section" id="section4">Section 4</div>

CSS

body{
    overflow:hidden;
    position:relative;
}

 .section {
    width: 100%;
    height: 1500px;
    display:block;
    color: #fff;
    font-size:2em;
}
#section1 {
    background: blue;
}
#section2 {
    background: red;
}
#section3 {
    background: green;
}
#section4 {
    background: yellow;
    color: #000;
}

JavaScript

var sections = {};
	var numberSections = 0;
	$('.section').each(function(index, element){
		//current slide is active
		if(!index){
			sections[$(this).attr('id')] = 1;	
		}
		else{
			sections[$(this).attr('id')] = 0;
		}
		numberSections++;
	});


/**
	 * Detecting mousewheel scrolling
	 * 
	 * http://blogs.sitepointstatic.com/examples/tech/mouse-wheel/index.html
	 * http://www.sitepoint.com/html5-javascript-mouse-wheel/
	 */
	var sq = {};
	sq = document;

	if (sq.addEventListener) {
	    sq.addEventListener("mousewheel", MouseWheelHandler(sections), false);
	    sq.addEventListener("DOMMouseScroll", MouseWheelHandler(sections), false);
	} else sq.attachEvent("onmousewheel", MouseWheelHandler);



	var isMoving = false;

	var calledOnce = false;

	function MouseWheelHandler(sections) {
	    return function (e) {
	        calledOnce = true;

	        // cross-browser wheel delta
	        var e = window.event || e;
	        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

	        //console.log(delta);

	        if (!isMoving) { //if theres any #
	           
	                //scrolling down?
	                if (delta < 0) {
	                    moveSlideDown(sections);
	                }

	                //scrolling up?
	                else {
	                    moveSlideUp(sections);
	                }

	                var value = '#' + getCurrentSlide(sections);

	                isMoving = true;

	                scrollPage(value);
	            
	        }

	        return false;
	    }
	}


	/**
	 * Updates the slides array setting the active status or the previous slide.
	 * If we were on the first slide (home page), it won't do anything.
	 */
	function moveSlideUp(slides){		
		var previousKey = 0;
		
		$.each(slides, function(i, value){
			
		    if( value  == '1' ) {
		    	if(previousKey != 0){
			    	slides[i] = 0;
			    	slides[previousKey] = 1;
		    	}
		    }
		    previousKey = i;
		});	
	}


	/**
	 * Updates the slides...