JSFiddle - React, Tailwind, and code Playground

by EstSiim

HTML

<script src="https://rawgit.com/cubiq/iscroll/master/build/iscroll-zoom.js"></script>
<div id="wrapper">
		
    <div id="content">
        
    </div>

</div>

<br><br><br>

<button id="btn">Zoom to view</button>

CSS

#wrapper {
    width: 500px;
    height: 500px;
    border: 1px solid black; 
    overflow: hidden;
    position: relative;
}

#content {
    width: 700px;
    height: 300px;
    background-color: blue;
}

JavaScript

var myScroll = new IScroll('#wrapper', {
		mouseWheel: true,
		keyBindings: true,
		wheelAction: 'zoom',
		scrollbars: true,
		scrollX: true,
		scrollY: true,
		zoomMin: 0.1,
		zoom: true,	
		mouseWheelSpeed: 20,
});


var zoomFactor = 0.4;  //need to calculate this somehow

$('#btn').on('click', function() {

	myScroll.zoom(myScroll.scale - zoomFactor);

});