JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    <div class="bg">
    </div>
</div>
<button id="scroll">Scroll .main div (Click First)</button><br/>
<button id="toggle">Toggle .main div</button>

CSS

.main { 
    display:none; 
    position:abolsute; 
    width:250px;height:250px; 
    overflow:scroll;
}
.bg { 
    background: blue url(http://defaulttester.com/img/bg-landing-mario.jpg); 
    width:1200px; 
    height:800px; 
}

JavaScript

$("#toggle").click(function(){ 
    $(".main").toggle(); 
});

$("#scroll").click(function(){ 
    $(".main").scrollTop($(".bg").height()/2);
    $(".main").scrollLeft($(".bg").width()/2);
});