JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js"></script>
<script src="https://raw.github.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.js"></script>
<div id="container">
    <div class="item active"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

CSS

#container {
    height:300px;
    width:300px;
    border:1px solid #000;
    overflow:scroll;
    
}
.item {
    height:200px;
    width:300px;
    background:red;
    margin-bottom:20px;
}

JavaScript

$('#container').mousewheel(function(event, delta) {
    var active = $('.active');
           
    if (delta > 0) {
        if (active.not(":first-child")) {
            active.removeClass('active').prev().addClass('active');
        }
        
    } else {
        if (active.not(":last-child")) {
            active.removeClass('active').next().addClass('active');
        }
    }
        
    $(this).scrollTo( $('.active'),100);
    return false;
});