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">THE START augue dolore melius ex, mei ea homero deleniti. Ad mel paulo laoreet, vix omnis iusto nominati no. Vel eu numquam scriptorem, cum cibo verear discere ei, summo corrumpit reprimique eos eu. Nibh regione scripserit ius at, animal fabulas recusabo ius ex. Nemore luptatum delicatissimi his ne, legimus salutandi duo ne.

Qui suscipit menandri splendide eu. Vim ut esse eros salutatus, nullam elaboraret dissentiunt vis in. Mel ad noluisse officiis, an vel aliquam meliore honestatis, vim zril assentior moderatius ea. Vis populo graeci ea, cu pro facer eirmod numquam. Audiam virtute utroque sed ea, eu quaestio qualisque qui. Sit te nostrum deserunt, ex inani adipiscing ius. Cum et consetetur necessitatibus.

Molestiae dissentiunt et pro. Eam ea malorum epicuri, in eos aperiam facilis nominavi. Nostro laboramus sea cu, apeirian inimicus mea ea. No sea natum patrioque consetetur, rebum inciderint nam no, autem populo altera has ex.

Cum no rebum consulatu, ad vis possim molestiae, civibus eloquentiam voluptatibus eam eu. Ea commodo alterum signiferumque ius, quidam reprehendunt id cum. Dicta veritus neglegentur et eos, est aeque quidam te. No mel viris tacimates delicatissimi, ne eum vidisse omnesque omittantur. Mei no viris alterum legimus, ubique eirmod mel ex, vis magna reque convenire no.

Quo cu quis iracundia, evertitur intellegat consectetuer ius no. Id nam latine abhorreant. In ipsum consequat pro, ei verear scripta accusam mea. Eos ad simul deterruisset, viris insolens ad has.

Pro ea elitr congue aliquando. Discere principes voluptatum pro ad, usu errem delectus officiis no, mazim sanctus laboramus ne his. Vocibus interesset voluptatibus in sea. Qui at pericula tractatos ullamcorper, iisque voluptaria per te.

Habemus definitionem vis ad....

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 {
    width:1000px;
}

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);
    $('body').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 = '';
});