JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="red box active">Red</div>
    <div class="yellow box">Yellow</div>
    <div class="orange box">Orange</div>
    <div class="grey box">Grey</div>
    <div class="green box">Green</div>
</div>

CSS

.red {
    background: red;
}
.yellow {
    background: yellow;
}
.orange {
    background: orange;
}
.grey {
    background:grey;
}
.green {
    background:green;
}
.box {
    width: 100%;
    height: 100%;
    display:block;
}
#container {
    transition: all 1000ms ease-in-out;
    height:100%;
    height: 100%;
    position: relative;
    touch-action: none;
}
button {
    position:fixed;
    top:20px;
    left:20px;
    z-index:999;
    padding:20px;
}
html, body {
    overflow:hidden;
    height:100%;
    margin:0;
}

JavaScript

var canScroll = true;

addMouseWheelHandler();

function MouseWheelHandler(e) {
    if (canScroll) {
        var next = $('.box.active').next('.box');
        if (next.length) {
            scrollPage(next);
        }
    }
}

/**
 * Scrolls the site to the given element and scrolls to the slide if a callback is given.
 */
function scrollPage(element) {
    var dtop = element.position().top;

    element.addClass('active').siblings().removeClass('active');

    canScroll = false;

    var translate3d = 'translate3d(0px, -' + Math.ceil(dtop) + 'px, 0px)';
    $('#container').css(getTransforms(translate3d));

    //after animations finishes we allow to scroll again
    setTimeout(function () {
        canScroll = true;
    }, 1000);    
    //1000s is the time set to the in the CSS for the container
    //transition: all 1000ms ease-in-out;
}

/**
 * Returns the cross-browser transform string.
 */
function getTransforms(translate3d) {
    return {
        '-webkit-transform': translate3d,
            '-moz-transform': translate3d,
            '-ms-transform': translate3d,
            'transform': translate3d
    };
}

/**
 * Adds the auto scrolling action for the mouse wheel and trackpad.
 * After this function is called, the mousewheel and trackpad movements will scroll through sections
 */
function addMouseWheelHandler() {
    if (document.addEventListener) {
        document.addEventListener('mousewheel', MouseWheelHandler, false); //IE9, Chrome, Safari, Oper
        document.addEventListener('wheel', MouseWheelHandler, false); //Firefox
        document.addEventListener('DOMMouseScroll', MouseWheelHandler, false); //Old Firefox
    } else {
        document.attachEvent('onmousewheel', MouseWheelHandler); //IE 6/7/8
    }
}