JSFiddle - React, Tailwind, and code Playground

HTML

<div id="scroll">
    <img class="blue" src="http://www.wired.com/images_blogs/photos/uncategorized/2008/03/04/puppy.jpg"/>
</div>

CSS

#scroll {
    width: 100%;
    height: 800px;
    overflow:hidden;
}

.blue {
    width: 1800px;
    height: 1800px;
    margin-left: auto;
    margin-right: auto;
   
}

JavaScript

$(document).ready(function(){
    var $container = $("#scroll");
    var $img = $("#scroll img");
    var cHeight = $container.height();
    var cWidth = $container.width();
    var iHeight = $img.height();
    var iWidth = $img.width();
    
    var top = (iHeight - cHeight) / 2;
    var left = (iWidth - cWidth) / 2;
    
    $container.scrollLeft(left);
    $container.scrollTop(top);
});

var clicking = false;
var previousX;
var previousY;

$("#scroll").mousedown(function(e) {
    e.preventDefault();
    previousX = e.clientX;
    previousY = e.clientY;
    clicking = true;
});

$(document).mouseup(function() {
      
    clicking = false;
});

$("#scroll").mousemove(function(e) {

    if (clicking) {
        e.preventDefault();
        var directionX = (previousX - e.clientX) > 0 ? 1 : -1;
        var directionY = (previousY - e.clientY) > 0 ? 1 : -1;
        //$("#scroll").scrollLeft($("#scroll").scrollLeft() + 10 * directionX);
        //$("#scroll").scrollTop($("#scroll").scrollTop() + 10 * directionY);
        $("#scroll").scrollLeft($("#scroll").scrollLeft() + (previousX - e.clientX));
        $("#scroll").scrollTop($("#scroll").scrollTop() + (previousY - e.clientY));
        previousX = e.clientX;
        previousY = e.clientY;
    }
});



$("#scroll").mouseleave(function(e) {
    clicking = false;
});