By utilizing jQuery, you have the ability to set up a
$('#container').on('wheel', zoomContainer)
handler that employs a transform with scale to adjust the size of the container. The comparable native JavaScript handler would be:
document.querySelector('#container').onwheel = zoomContainer;
Here is a demonstration. However, I have not yet determined how to crop the container while zooming.
let scale = 1;
function zoomContainer(event) {
event.preventDefault();
if(event.originalEvent.deltaY !== 0) {
if(event.originalEvent.deltaY < 0) {
// scrolled up
scale += 0.1;
} else {
// scrolled down
if(scale > 0.2) {
scale -= 0.1;
}
}
$('#wrapper').css({transform: 'scale(' + scale+')'});
}
}
$('#container').on('wheel', zoomContainer);
#page {
width: 500px;
}
#header, #footer, #leftSide, #rightSide {
border: 1px gray solid;
padding: 3px 10px;
}
#leftSide {
float: left;
height: 200px;
}
#rightSide {
float: right;
height: 200px;
}
#wrapper {
height: 200px;
overflow: hidden;
}
#container {
width: 300px;
height: 200px;
padding: 3px 10px;
overflow: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="page">
<div id="header">Header</div>
<div>
<div id="leftSide" style="float: left;">Left Sidebar</div>
<div id="rightSide" style="float: right;">Right Sidebar</div>
<div id="wrapper">
<div id="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /><br />
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /><br />
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /><br />
</div>
</div>
<div style="clear: both;"></div>
</div>
<div id="footer">Footer</div>
</div>
Similarly, you could incorporate panning using a transform with translate.