JSFiddle - React, Tailwind, and code Playground

HTML

<div class="controls">These are the controls:
    <input type="text" /><input type="text" /></div>
<div class="scrollable-div">
    <p>I am your scrollable div!</p>
    <p>I am your scrollable div!</p>
    <p>I am your scrollable div!</p>
    <p>I am your scrollable div!</p>
    <p>I am your scrollable div!</p>
    <p>I am your scrollable div!</p>
    <p>I am your scrollable div!</p>
    <p>I am your scrollable div!</p>
    <p>I am your scrollable div!</p>
    <p>I am your scrollable div!</p>
    <p>I am your scrollable div!</p>
    <p>I am your scrollable div!</p>
</div>
<div class="footer">This is the footer</div>

CSS

.scrollable-div {
    height:200px;
    border:1px solid black;
    overflow: scroll;
}

JavaScript

var SCROLL_STEP = 20;
$(function () {
    var $scrollableDiv = $(".scrollable-div");
    $(document).on('keydown', function (e) {
        switch (e.which) {
            case 38:
                scrollUp();
                break;
            case 40:
                scrollDown();
                break;
        }
    });

    function scrollUp() {
        $scrollableDiv[0].scrollTop -= SCROLL_STEP;        
    }
    
    function scrollDown() {
        $scrollableDiv[0].scrollTop += SCROLL_STEP;    
    }
});