JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<section class="section">First</section>
<section class="section">Second</section>
<section class="section">Third</section>
<section class="section">Fourth</section>

JavaScript

$('.section').height($(window).height());
$('.section').first().addClass('active');

$('.section').on('mousewheel DOMMouseScroll', function(e) {
    console.log(e);
    e.preventDefault();
    var isUp = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0;

    var el = $('.section.active')[isUp ? 'prev' : 'next']();

    setTimeout(function() {
        $('body, html').animate({
            scrollTop: el.offset().top
        }, 'slow');
        el.addClass('active').siblings().removeClass('active');
    }, 800);
});