JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <img src="http://nyquil.org/uploads/IndianHeadTestPattern16x9.png"></img>
</div>
<button id="left">Left</button>
<button id="right">Right</button>
<button id="up">Up</button>
<button id="down">Down</button>

CSS

#container {
    overflow: hidden;
    width: 250px;
    height: 250px;
}

JavaScript

$('#left').click(function () {
    scroll = $('#container').scrollLeft();
    $('#container').animate({'scrollLeft': scroll-100},1000);
});
$('#right').click(function () {
    scroll = $('#container').scrollLeft();
    $('#container').animate({'scrollLeft': scroll+100},1000);
});
$('#up').click(function () {
    scroll = $('#container').scrollTop();
    $('#container').animate({'scrollTop': scroll-100},1000);
});
$('#down').click(function () {
    scroll = $('#container').scrollTop();
    $('#container').animate({'scrollTop': scroll+100},1000);
});