Building up a movable viewport for a workspace

Question

I want to implement a very huge workspace for placing objects onto it, but for convenient working I want to make a special "viewport" which shows a portion of workspace for user and this "viewport" can be resized or moved within the workspace. For instance, in Photoshop, when you zoom in an image, you see only some part of it and then you can go to the place you want to edit.

How can I implement this in HTML?

Answer 1

You can use some CSS transform: scale(); to do it:

document.querySelector('input[type="range"]').addEventListener('input', e => {
  document.querySelector('.resizable').style.setProperty('--size', e.target.value)
})

.container{
  width:300px;
  height:300px;
  overflow-x: scroll;
  overflow-y: scroll;
  border: 1px solid black;
}
.resizable{
  transform: scale(var(--size));
  transform-origin: top left;
  --size:1;
}

<div class="container">
  <div class="resizable">
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.   Sed turpis nibh, volutpat in egestas ac, pellentesque ac lacus. Curabitur at aliquam mi. Nullam nec imperdiet urna. Maecenas sodales malesuada urna, auctor mattis orci. Etiam purus erat, cursus quis nunc faucibus, mollis scelerisque nisi. Nullam sit amet commodo nisi. Proin aliquet quis leo ac rutrum. Curabitur dignissim, augue vel rutrum viverra, tellus mi rutrum elit, aliquam vulputate ipsum augue et ante. Proin lacinia erat ut risus lacinia congue. Nulla ac commodo metus, at viverra mi. Fusce aliquet sodales vulputate. Fusce a tempus nibh, id pharetra lacus. Cras pulvinar congue lacus at aliquet. Nam consequat fringilla augue vel faucibus. Proin non gravida purus. Aenean ut faucibus sem.</div>
  </div>
</div>
Drag me to resize the lorem ipsum:<br/>
<input type="range" value="1" step="0.5" min="0.5" max="4" />

Try it on CodePen (at least until the Stack Snippets server is down...)