JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<div>Scale:</div>

CSS

body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

div {
  width: 105px;
  height: 105px;
  background: #cdf;
  padding: 5px;
}

JavaScript

function zoom(event) {
  event.preventDefault();

  scale += event.deltaY * -0.01

  // Restrict scale
  scale2 = Math.min(Math.max(0.125, scale), 4);
  el.textContent = `Scale: ${scale}\nScale2: ${scale2}`

  // Apply scale transform
  el.style.transform = `scale(${scale2})`;
}

let scale = 1;
let scale2 = 1;
const el = document.querySelector("div");
const el_scale = document.querySelector("div span");
//el.onwheel = zoom;
el.addEventListener("wheel", zoom, { passive: false });