JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="scrollableContainer">
    <div id="container">
        <div class="draggable">Drag me</div>
    </div>
</div>
<button id="rndScale">Random scale</button>

CSS

#scrollableContainer {
 width:100%;
 height:300px;
 overflow:auto;
    background-color:black;
}

#container {
    background-color:grey;
    width:250px;
    height:250px;
    position:relative;
    -webkit-transform-origin: 0 0;
   -moz-transform-origin: 0 0;
   transform-origin: 0 0;
   -ms-transform-origin: 0 0;
}
.draggable {
    background-color:red;
    display:inline;
    position:absolute;
    top:10px;
    left:10px;
}

JavaScript

var percent = 1, containmentArea = $("#container");

function dragFix(event, ui) {
    var contWidth = containmentArea.width(), contHeight = containmentArea.height();
    ui.position.left = Math.max(0, Math.min(ui.position.left / percent , contWidth - ui.helper.width()));
    ui.position.top = Math.max(0, Math.min(ui.position.top  / percent,  contHeight- ui.helper.height()));
}

$(".draggable").draggable({
    cursor: "move",
    drag: dragFix,
});


//Test

function setScale(scalePercentage){       
    percent= scalePercentage;
$("#container").css({
    'transform': 'scale(' + percent + ')',
    '-moz-transform': 'scale(' + percent + ')',
    '-webkit-transform': 'scale(' + percent + ')',
    '-ms-transform': 'scale(' + percent + ')'
})
}

setScale(1.5);

$("#rndScale").click(function(){setScale(1 + Math.random());});