JSFiddle - React, Tailwind, and code Playground

by RancoR

HTML

<div id="container">
    <div class="child red">Child 1</div>
    <div class="child blue">Child 2</div>
    <div class="child red">Child 3</div>
    <div class="child blue">Child 4</div>
    <div class="child red">Child 5</div>
</div>

CSS

#container {
    height: 500px;
    width: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

.child {
    height: 100%;
    width: 100%;
}

.red {
    background-color: red;
}
.blue {
    background-color: blue;
}

JavaScript

$container = $('#container');
var doScroll = true;
var top = 0;

$container.on("scroll", function(event){
    event.preventDefault();
    if (doScroll) {
        doScroll = false;
        top += $container.height();
        console.log("scroll event fired");
        $container.animate({scrollTop: top}, '700', 'swing', function() { 
            doScroll = true;
        });
    } 
});