JSFiddle - React, Tailwind, and code Playground

HTML

<div class="body">
    <div class="col left">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
    </div>
    <div class="col right">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
    </div>
</div>

CSS

html, body {
    margin:0;
    height:100%;
    width:100%;
}
.body {
    height:100%;
    position:relative;
}
.col {
    height:100%;
    width:50%;
    display:inline-block;
    margin:0;
}
.content {
    position:relative;
    height:100%;
}
.col.left .content:nth-child(odd) {
    background:steelblue;
}
.col.left .content:nth-child(even) {
    background:blue;
}
.col.right .content:nth-child(odd) {
    background:pink;
}
.col.right .content:nth-child(even) {
    background:red;
}
.col.right {
    position:fixed;
    top:0;
    right:0;
}

JavaScript

(function ($) {
	var top = 0;
	var contentHeight, contents, totalHeight;
	var locked = false;
	var timeout;

    var align = function () {
        var pos = (top + $(window).scrollTop());
        var snapUp = 0 - (pos % contentHeight) < (contentHeight / 2);
        var multiplier = snapUp
            ? Math.ceil(pos / contentHeight)
            : Math.floor(pos / contentHeight);
        var newTop = contentHeight * multiplier;
        $('html, body').animate({ scrollTop: newTop + totalHeight }, 200);
        locked = false;
    };

    var reset = function () {
        contentHeight = $('.right').height();
        contents = $('.right > .content').length;
        totalHeight = contentHeight * (contents - 1);
        top = (0 - totalHeight);
    };

    var scrollRight = function () {
        $('.right').css('top', (top + $(window).scrollTop()) + 'px');
    };

    var alignWhenIdle = function (delay) {
        clearTimeout(timeout);
        timeout = setTimeout(align, delay);
    };

    $(document).on('ready', function () {
        reset();
        scrollRight();
    });

    $(window).on('scroll', function () {
        locked = true;
        scrollRight();
    });

    $(window).on('mouseup', function (e) {
        if (locked) {
            align();
        }
    });

    $(window).resize(function () {
        locked = true;
        reset();
        scrollRight();
        alignWhenIdle(300);
    });

    $(window).on('mousewheel', function (e) {
        alignWhenIdle(300);
    });

    $(window).on("keyup", function (e) {
         alignWhenIdle(300);
    });

})(jQuery);