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

$('.left').on('click', function(event) {
                var target = $(".image-container");
                var current_x = target.scrollLeft();
                
                if( target.length ) {
                    event.preventDefault();
                    $(target).animate({
                        scrollLeft: current_x-100
                    }, 500);
                }
            });
            $('.right').on('click', function(event) {
                var target = $(".image-container");
                var current_x = target.scrollLeft();
                
                if( target.length ) {
                    event.preventDefault();
                    $(target).animate({
                        scrollLeft: current_x+100
                    }, 500);
                }
            });
            $('.up').on('click', function(event) {
                var target = $(".image-container");
                var current_y = target.scrollTop();
                
                if( target.length ) {
                    event.preventDefault();
                    $(target).animate({
                        scrollTop: current_y-100
                    }, 500);
                }
            });
            $('.down').on('click', function(event) {
                var target = $(".image-container");
                var current_y = target.scrollTop();
                
                if( target.length ) {
                    event.preventDefault();
                    $(target).animate({
                        scrollTop: current_y+100
                    }, 500);
                }
            });