JSFiddle - React, Tailwind, and code Playground

by doug65536

HTML

<script src="http://brandonaaron.github.io/jquery-mousewheel/jquery.mousewheel.js"></script>
<div id="container"><img src="http://placehold.it/1024&amp;text=test"/></div>

CSS

#container {
    position: relative;
    overflow: scroll;
    width: 500px;
    height: 500px;
    border: solid black 1px;
}
img {
    position: relative;
}

JavaScript

var zoom = 1, zoom, ofs, img = $('img'), imgW = img.width(), imgH = img.height();

ofs = img.offset();
zoom = 1;

img.on('mousewheel', function(event, delta) {
    event.preventDefault();
    
    var adj = imgW * 0.1;
    // Zoom in
    zoom += 0.1 * delta;
    ofs.left -= adj * delta * 0.5;
    ofs.top -= adj * delta * 0.5;
    ofs.left = Math.min(0, ofs.left);
    ofs.top = Math.min(0, ofs.top);
    img.css({top: ofs.left, left: ofs.top, width: imgW * zoom, height: imgH * zoom});
    console.log(delta);
});