JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<div data-role="page">
        <div id="outer" class="keyboardScroll">
            <div id="inner"></div>
        </div>
    </div>

CSS

#outer {
            overflow:scroll;
            height: 50vh;
            width: 50vw;
        }

        #inner {
            height: 500vh;
            width: 500vw;
        }

JavaScript

var currentMousePos = { x: -1, y: -1 };

		$(document).mousemove(function(event)
		{
			currentMousePos.x = event.pageX;
			currentMousePos.y = event.pageY;
		});

		// keyboard handler
		$(document).on("keydown", function(e)
		{
			// get element under mouse
			var element = document.elementFromPoint(currentMousePos.x, currentMousePos.y);

			// search for scrollable element in parents
			while (!$(element).hasClass("keyboardScroll") && $(element).parents().length !== 0)
				element = element.parentElement;
				
			if (!$(element).hasClass("keyboardScroll"))
				return; // no scrollable element found

			// set scroll "speed"
			var delta = 10;
			
			if (e.keyCode === 38) // up
				delta *= -1;
			else if (e.keyCode === 40) // down
				delta *= 1;
			else if (e.keyCode === 33) // pageup
				delta *= -10;
			else if (e.keyCode === 34) // pagedown
				delta *= 10;
			else
				return;
			
			// scroll element
			$(element).scrollTop($(element).scrollTop() + delta);

			// stop event from propagating to jQuery Mobile handlers
			e.preventDefault();
			e.stopPropagation();
		});