JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="viewPort">
    <div id="draggable">Drag me</div>
</div>

CSS

#viewPort {
    width: 300px;
    height: 300px;
    background: #B7B5B5;
    overflow:scroll;
}
#draggable {
    width: 75px;
    height: 75px;
    background: #B3A487;
    border:1px solid #ccc;
    margin:5px;
}

JavaScript

$("#draggable").draggable({
    scrollSensitivity: 10,
    scrollSpeed: 40,
    revert: function (event, ui) {
        $("#draggable").originalPosition = {
            top: 0,
            left: 0
        };
        return !event;
    },
    drag: function (e) {
        console.log($("#draggable").draggable("option", "scrollSensitivity"));
    }
});

var lastScrollTop = 0,
    lastScrollLeft = 0,
    delta = 5;
$('#viewPort').scroll(function (event) {
    var st = $(this).scrollTop();
    var sl = $(this).scrollLeft();

    if (Math.abs(lastScrollTop - st) > delta) {
        $("#draggable").draggable("option", "scrollSensitivity", 5);
        $("#draggable").draggable("option", "scrollSpeed", 10);
        (st > lastScrollTop) ? console.log('scroll down') : console.log('scroll up');
        lastScrollTop = st;
    }

    if (Math.abs(lastScrollLeft - sl) > delta) {
        $("#draggable").draggable("option", "scrollSensitivity", 100);
        $("#draggable").draggable("option", "scrollSpeed", 40);
        sl > lastScrollLeft ? console.log('scroll right') : console.log('scroll left');
        lastScrollLeft = sl;
    }
});