JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="page">
    <div class="full-y blue v-prep">
        <div class="v-align">
            <p>Aenean massa. Nunc interdum lacus sit amet orci. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Praesent ac massa at ligula laoreet iaculis.</p>
        </div>
    </div>
    <div class="full-y grey">
        <div class="v-align">
            <p>Vestibulum ullamcorper mauris at ligula.</p>
        </div>
    </div>
    <div class="full-y green v-prep">
        <div class="v-align">
            <p>Curabitur blandit mollis lacus. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Nullam quis ante. Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc.</p>
            <p>Aliquam erat volutpat. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Vestibulum fringilla pede sit amet augue. Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede.</p>
            <p>Curabitur blandit mollis lacus. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Nullam quis ante. Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc.</p>
            <p>Aliquam erat volutpat. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Vestibulum fringilla pede sit amet augue. Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede.</p>
            <p>Curabitur blandit mollis lacus. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Nullam quis ante. Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc.</p>
            <p>Aliquam erat volutpat. Vestibulum turpis sem, aliquet eget, lobortis...

CSS

html,body{
    width: 100%;
    height: 100%;
    margin: 0;
}
.page{
    position: relative;
    width: 100%;
    height: 100%;
}
.full-y{
    position: relative;
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    text-align: center;
    font-family: sans-serif;
    font-size: 11px;
    padding: 25px;
    text-transform: uppercase;
}
.v-prep{
    display: flex;
    align-items: center;
}
.v-prep > .v-align{
    width: 100%;
    box-sizing: border-box;
}
.blue{
    background: #05d;
    color: #fff;
}
.grey{
    background: #999;
    color: #fff;
}
.green{
    background: #0d5;
    color: #fff;
}

JavaScript

var sectionScroller = {
    watchElem: '.section-scroll',
    scrollTime: 1000,
    scrollCore: {
     var keys = [37, 38, 39, 40];

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;  
}

function keydown(e) {
    for (var i = keys.length; i--;) {
        if (e.keyCode === keys[i]) {
            preventDefault(e);
            return;
        }
    }
}

function wheel(e) {
  preventDefault(e);
}

function disable_scroll() {
  if (window.addEventListener) {
      window.addEventListener('DOMMouseScroll', wheel, false);
  }
  window.onmousewheel = document.onmousewheel = wheel;
  document.onkeydown = keydown;
}

function enable_scroll() {
    if (window.removeEventListener) {
        window.removeEventListener('DOMMouseScroll', wheel, false);
    }
    window.onmousewheel = document.onmousewheel = document.onkeydown = null;  
}   
    }
}