JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="content"></div>

CSS

.content{
    background-color:lightgray;
    height:1500px;
}

JavaScript

var scrollAmount = 0;
var pixelsToNotify = 200;

$(document).scroll(function() {
  var distance = $(window).scrollTop();
    console.log(distance, scrollAmount);
    if(distance - scrollAmount > pixelsToNotify){
        alert('user scrolled down event');
        scrollAmount = distance;
    }
    if(distance < scrollAmount - pixelsToNotify){
    	alert('user scrolled up event');
    	scrollAmount = distance;
    }
});