JSFiddle - React, Tailwind, and code Playground

by Oliver_kh

HTML

<div class="d">
    <div class="f">
        <div class="a">s</div>
    </div>
</div>

CSS

.d {
    width:500px;
    background:red;
    overflow-y:scroll;
    height:495px;
}
.f {
    width:300px;
    color:white;
    background:black;
    height:500px;
    overflow-y:scroll;
}
.f .a {
    height:5060px;
}
body {
    overflow:hidden;
}

JavaScript

$(function () {
    var lastScrollTop = 0;
    $('.d').scroll(function () {

        var st = $(this).scrollTop();
        if (st > lastScrollTop) {
            
                        alert('down');
        } else {
alert('top');
        }
        lastScrollTop = st;
    });
});