滚动缩放

使用鼠标滚轮（或触控板）可以用来放大和缩小工作区域。

这并不难，使用 wheel 事件和 CSS transform 属性便可做到。

<div class="workspace">
  <h1>使用滚轮或触摸板滚动</h1>
</div>

.workspace {
  display: grid;
  place-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  font: 700 12px system-ui;
}

const zoomElement = document.querySelector('.workspace')
let zoom = 1
const ZOOM_SPEED = 0.1

document.addEventListener('wheel', function (e) {
  if (e.deltaY > 0) {
    zoomElement.style.transform = `scale(${(zoom += ZOOM_SPEED)})`
  } else {
    zoomElement.style.transform = `scale(${(zoom -= ZOOM_SPEED)})`
  }
})