使用jQuery，你可以安装一个$('#container').on('wheel', zoomContainer)处理程序，它使用带scale的转换来调整容器的大小。document.querySelector('#container').onwheel = zoomContainer;
这里是一个概念证明。我还没有想出如何在缩放时裁剪容器。

let scale = 1;
function zoomContainer(event) {
  event.preventDefault();
  if(event.originalEvent.deltaY !== 0) {
    if(event.originalEvent.deltaY < 0) {
      // wheeled up
      scale += 0.1;
    } else {
      // wheeled 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>

类似地，您可以使用translate转换来实现平移。