JSFiddle - React, Tailwind, and code Playground

HTML

<div class="scroll-box-container">
                <div class="image-container">
                    <img src="http://orig14.deviantart.net/405b/f/2012/180/b/f/pattern_variation_by_absurdwordpreferred-d55auet.jpg">
                </div>
                <div class="control right"></div>
                <div class="control down"></div>
                <div class="control left"></div>
                <div class="control up"></div>
            </div>

CSS

.scroll-box-container {
                position: relative;
                max-width: 100%;
                height: 500px;
            }
            
            .image-container {
                overflow: hidden;
                height: 100%;
                width: 100%;
            }
            .scroll-box-container .control {
                width: 20px;
                position: absolute;
                background-color: #ccc;
                opacity: 0.3;
            }
            .scroll-box-container .right {
                height: 500px;
                right: 0;
                top: 0;
            }
            .scroll-box-container .down {
                width: calc(100% - 40px);
                height: 20px;
                left: 0;
                bottom: 0;
                margin-left: 20px;
                margin-right: 20px;
            }
            .scroll-box-container .left {
                height: 500px;
                left: 0;
                top: 0;
            }
            .scroll-box-container .up {
                width: calc(100% - 40px);
                height: 20px;
                left: 0;
                top: 0;
                margin-left: 20px;
                margin-right: 20px;
            }

JavaScript

var speed_x = 0, speed_y = 0;
var timer = null;
var target = $(".image-container");

function scroll() {
    if (speed_x == 0 && speed_y == 0) return;
    var current_x = target.scrollLeft();
    var current_y = target.scrollTop();            
    target.prop({
        scrollLeft: current_x - speed_x,
        scrollTop:  current_y - speed_y
    });
}

$('.control').on('mouseover mouseout', function (event) {
    var $this = $(this);
    var speed = (event.type == 'mouseover' ? 10 : 0)
    if ($this.hasClass('left'))  speed_x = +speed;
    if ($this.hasClass('right')) speed_x = -speed;
    if ($this.hasClass('up'))    speed_y = +speed;
    if ($this.hasClass('down'))  speed_y = -speed;
}).on( 'mousedown', function () {
    scroll();
    if (timer !== null) clearInterval(timer);
    timer = setInterval(scroll, 50);
    return false;
});
$(document).on('mouseup', function () {
    if (timer !== null) clearInterval(timer);
    timer = null;
});