JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
    <div class="direction_left"></div>
    <div class="direction_right"></div>
    <div class="direction_up"></div>
    <div class="direction_down"></div>
</div>
<div id="game">
    <div id="pos"></div>
</div>

CSS

.direction_left {
    z-index:10;
    position:fixed;
    top:0;
    left:0;
    height:100%;
    width:5%;
    border:1px solid #000;
}
.direction_right {
    z-index:10;
    position:fixed;
    top:0;
    right:0;
    height:100%;
    width:5%;
    border:1px solid #000;
}
.direction_up {
    z-index:10;
    position:fixed;
    top:0;
    left:0;
    height:5%;
    width:100%;
    border:1px solid #000;
}
.direction_down {
    z-index:10;
    position:fixed;
    bottom:0;
    left:0;
    height:5%;
    width:100%;
    border:1px solid #000;
}
#game {
    width:100%;
    height:100%;
    overflow:auto;   
    overflow:hidden;
    border:1px solid #000;
}









#pos {
    padding:2%;
    width:1000px;
    height:1000px;
    
    background: #4c4c4c; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* IE10+ */
    background: linear-gradient(135deg,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111...

JavaScript

var h_amount = '';
var v_amount = '';

function scroll_h() {
    console.log('scrolling left and right'+h_amount);
    $('#game').animate({
        scrollLeft: h_amount
    }, 100, 'linear',function() {
        if (h_amount != '') {
            scroll_h();
        }
    });
}
function scroll_v() {
    console.log('scrolling up and down'+v_amount);
    $('#game').animate({
        scrollTop: v_amount
    }, 100, 'linear',function() {
        if (v_amount != '') {
            scroll_v();
        }
    });
}
$('.direction_left').hover(function() {
    console.log('scroll left');
    h_amount = '-=50';
    scroll_h();
}, function() {
    h_amount = '';
});
$('.direction_right').hover(function() {
    console.log('scroll right');
    h_amount = '+=50';
    scroll_h();
}, function() {
    h_amount = '';
});

$('.direction_up').hover(function() {
    console.log('scroll up');
    v_amount = '-=50';
    scroll_v();
}, function() {
    v_amount = '';
});
$('.direction_down').hover(function() {
    console.log('scroll down');
    v_amount = '+=50';
    scroll_v();
}, function() {
    v_amount = '';
});