为工作区建立一个可移动的视口

Question

我想实现一个非常大的工作空间来放置对象，但为了方便工作，我想制作一个特殊的 "viewport" 来为用户显示工作空间的一部分，这个 "viewport" 可以在工作区内调整大小或移动。例如，在 Photoshop 中，当您放大图像时，您只能看到它的一部分，然后您可以转到要编辑的地方。

如何在 HTML 中实现它？

Answer 1

你可以使用一些 CSS transform: scale(); 来做到这一点：

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" />

在 CodePen 上尝试（至少在 Stack Snippets 服务器关闭之前...）

为工作区建立一个可移动的视口

Building up a movable viewport for a workspace

html

javascript

css

implementation

viewport