JSFiddle - React, Tailwind, and code Playground

HTML

<p id="direcao">parado</p>
<div id="rolagemAqui">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam, velit nec laoreet lacinia, erat risus aliquet sapien, vel maximus dui nunc ut justo. Aliquam dictum mauris non metus sagittis consectetur. Proin molestie sem vel lorem convallis, sed blandit ipsum rhoncus. Phasellus molestie risus nec auctor eleifend. Nulla ultrices eu tortor at euismod. Integer ut facilisis enim. Donec pulvinar laoreet rutrum. Mauris tincidunt, massa vitae molestie efficitur, sem nulla imperdiet justo, in sagittis enim elit consequat ex. Duis imperdiet libero ut maximus ornare. Maecenas vestibulum massa vel suscipit aliquam. Etiam sed orci vestibulum, faucibus orci a, fringilla mi. Etiam sit amet augue eget est luctus consectetur vitae aliquet sem. Donec venenatis porttitor rutrum. Proin hendrerit urna velit, nec scelerisque sem consectetur et. Sed ultricies risus at tortor euismod, id sodales sapien tristique. Ut vel bibendum nisi. Donec et tempus est. Phasellus efficitur imperdiet nibh, quis faucibus sem dapibus quis. Pellentesque sed justo ut nulla fringilla consectetur. Nullam sed tempor nisi, quis vehicula turpis. Sed malesuada purus risus, nec pellentesque velit fringilla in. Sed sed risus et quam sagittis tincidunt in at nulla. Pellentesque vitae semper mi, sed bibendum mauris. Maecenas feugiat leo eu ipsum vehicula, at accumsan nisi ultricies. Nulla felis leo, eleifend in elit ut, egestas viverra lorem. Vivamus vel libero vitae lectus blandit porttitor quis a ante. In efficitur iaculis lorem, eget faucibus nulla ornare nec. Maecenas vestibulum, eros non tempus pretium, neque leo facilisis ante, vitae bibendum velit ligula vitae tortor. Donec euismod magna magna, sed iaculis ante fermentum ac. In elementum leo turpis, id viverra est ultrices nec. Nam non risus finibus justo ornare porta. Integer bibendum ex in velit placerat, id iaculis leo eleifend. Etiam ornare scelerisque eros eu bibendum. Sed luctus massa et nunc...

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#rolagemAqui {
    overflow: scroll;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
#direcao {
    position: absolute;
    z-index:1;
    left: 48%;
    top: 0;
    background-color: pink;
    padding: 6px;
}

JavaScript

var control = 0,
    lastScrollTop = 0,
    mousedown = false,
    mouseDownScroll = false,
    element = document.getElementById('rolagemAqui'),
    feedback = document.getElementById('direcao'),
    evento = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';

function tratarScroll(e) {
    var scrollAmt = element.scrollTop;
    var isMouseMove = e.type == 'mousemove';
    if (scrollAmt > lastScrollTop && !isMouseMove) {
        feedback.innerHTML = "baixo";
    } else if (scrollAmt < lastScrollTop && !isMouseMove) {
        feedback.innerHTML = "cima";
    } else {
        feedback.innerHTML = "parado";
    }
    lastScrollTop = scrollAmt;
};
element.addEventListener(evento, tratarScroll);
element.addEventListener('scroll', tratarScroll);
window.onmousedown = function () {
    mousedown = true;
}
window.onmouseup = function () {
    mousedown = false;
}
document.onmousemove = function (e) {
    if (mousedown) tratarScroll(e);
}