JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<div id="id0" data-id="0" class="nbhd red scrolledto"></div>
<div id="id1" data-id="1" class="nbhd yellow"></div>
<div id="id2" data-id="2" class="nbhd green"></div>
<div id="id3" data-id="3" class="nbhd blue"></div>
<div class="abovefooter"></div>
<div class="footer"></div>

CSS

.div {
        width: 100%;
    }

    .red {
        background: red;
    }

    .yellow {
        background: yellow;
    }

    .green {
        background: green;
    }

    .blue {
        background: blue;
    }

    .abovefooter {
        background: gray;
        height: 200px;
    }

    .footer {
        background: black;
        height: 350px;
    }

JavaScript

var isAnimated = false;
    var nbhdLength = $('.nbhd').length;
    var lastSectionId = nbhdLength - 1;
    var allHeight = ( nbhdLength - 1 ) * window.innerHeight;
    var up = true;

    function setHeights() {
        $('.nbhd').css('height', window.innerHeight);
    }

    setHeights();

    $('html').mousewheel(function(e) {
        
        var up = e.deltaY > 0;

        if (up) {
            console.log('up');
            up = true;

        } else {
            console.log('down');
            up = false;
            // console.log(up);
        }


        if ( ! up && $('#id'+lastSectionId).hasClass('scrolledto') || ( ! up && ! $('.scrolledto').length ) ) {
            $('.scrolledto').removeClass('scrolledto');
            return;
        }

        if (isAnimated) return;
        isAnimated = true;

        var currentSectionId = $('.nbhd.scrolledto').data('id');

        up ? currentSectionId-- : currentSectionId++;

        if (currentSectionId < 0) currentSectionId = 0;

        if ( ! $('.scrolledto').length ) currentSectionId = lastSectionId;

        $('.scrolledto').removeClass('scrolledto');

        var section = $('#id'+currentSectionId);

        section.addClass('scrolledto');

        var pos = section.offset().top;

        $('body, html').animate({scrollTop: pos}, 1000, function() {
            setTimeout(function(){
              isAnimated = false;
            },100)
            console.log($(window).scrollTop());
        });

    });