JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="box red">300px</div>
    <div class="box green">300px</div>
    <div class="box yellow">300px</div>
    <div class="box red">300px</div>
    <div class="box green">300px</div>
    <div class="box yellow">300px</div>
    <div class="box red">300px</div>
    <div class="box green">300px</div>
    <div class="box yellow">300px</div>
    <div class="box red">300px</div>
</div>

CSS

body {
    height:2000px;
}
.box
{
    color: #fff;
    height: 200px;
    width: 300px;
    border: 0;
}
#container {
    height:2000px;
    width:300px;
    background-color:blue;
}
.red {background-color:red;}
.green {background-color:green;}
.yellow {background-color:yellow;}

JavaScript

$(function(){
    var _top = $(window).scrollTop();
    var individualDivHeight = 200;

    $(window).scroll(function(){
        var _cur_top = $(window).scrollTop();
        var totalHeight = $('#container').height();
        var posToScroll = Math.round(_cur_top / individualDivHeight) * individualDivHeight;

        $('html, body').stop(true).animate({scrollTop: posToScroll}, 50);
    });
});