JSFiddle - React, Tailwind, and code Playground

HTML

<div id="results" class="scrollingdatagrid" style="height: 200px;overflow: scroll;">
    <table id="mstrTable" cellspacing="0" border="1">
        <thead>
            <tr>
                <th>File Number</th>
                <th>Date1</th>
                <th>Date2</th>
                <th>Status</th>
                <th>Num.</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>KABC</td>
                <td>09/12/2002</td>
                <td>09/12/2002</td>
                <td>Submitted</td>
                <td>1</td>
            </tr>
            <tr>
                <td>KCBS</td>
                <td>09/11/2002</td>
                <td>09/11/2002</td>
                <td>Lockdown</td>
                <td>2</td>
            </tr>
            <tr>
                <td>WFLA</td>
                <td>09/11/2002</td>
                <td>09/11/2002</td>
                <td>Submitted</td>
                <td>3</td>
            </tr>
            <tr>
                <td>WTSP</td>
                <td>09/15/2002</td>
                <td>09/15/2002</td>
                <td>In-Progress</td>
                <td>4</td>
            </tr>
            <tr>
                <td>KCBS</td>
                <td>09/11/2002</td>
                <td>09/11/2002</td>
                <td>Lockdown</td>
                <td>2</td>
            </tr>
            <tr>
                <td>WFLA</td>
                <td>09/11/2002</td>
                <td>09/11/2002</td>
                <td>Submitted</td>
                <td>3</td>
            </tr>
            <tr>
                <td>WTSP</td>
                <td>09/15/2002</td>
                <td>09/15/2002</td>
                <td>In-Progress</td>
                <td>4</td>
            </tr>
            <tr>
                <td>KCBS</td>
                <td>09/11/2002</td>
                <td>09/11/2002</td>
                <td>Lockdown</td>
                <td>2</td>
            </tr>
            <tr>
   ...

JavaScript

var lastScrollTop = 0;

$(document).keydown(function (e) {
    var tmpCode = e.keyCode;
    switch (tmpCode) {
        case 37:
            console.log("left");
            break;
        case 38:
            console.log("up");
            break;
        case 39:
            console.log("right");
            break;
        case 40:
            console.log("down");
            break;
        default:
            console.log(tmpCode);
            break;
    }
});

$("#results").on("scroll", function (e) {
    var st = $(this).scrollTop();
    if (st > lastScrollTop) {
        console.log("down scroll");
    } else {
        console.log("up scroll");
    }
    lastScrollTop = st;
});