JSFiddle - React, Tailwind, and code Playground

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>
<div id=log></div>

CSS

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

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

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

JavaScript

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

var scroller = function(event) {
  console.log("scroller called");
  top += $container.height() * (($(this).scrollTop() > top) ? 1 : -1);
  $container.animate({
    scrollTop: top
  }, 150, 'linear', function() {
    $(this).clearQueue().one("scroll", function() {
      // nesting eats the last event so it doesn't self-trigger
      $(this).one("scroll", scroller);
    });
  });
  return;
}

$container.one("scroll", scroller);