JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="box">
    <div id="inner"></div>
  </div>
</body>
</html>

CSS

#box {
  width: 300px;
  height: 350px;
  background: pink;
  overflow: auto;
}
#inner {
  width: 100%;
  height: 1500px;
}

JavaScript

var d = document;
var outer = d.getElementById('box');
var inner = d.getElementById('inner');

var oldScroll = outer.scrollTop;
outer.addEventListener('scroll', function(e) {  
  var newScroll = outer.scrollTop;
  if(Math.abs(newScroll-oldScroll) >= 100) {
    console.log('YESSSS');
    oldScroll = newScroll;
  }
});