<div class="workspace">
  <h1>Scroll with Wheel or Trackpad</h1>
</div>

.workspace {
  height: 100vh;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  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)})`;
  }
});