[JavaScript] 마우스 wheel 이벤트를 조작하여, Zoom 기능 구현

Scroll to Zoom

마우스 스크롤 휠 이벤트를 이용하여, DOM 이벤트 조작 & CSS 변환으로 작업 영역을 확대 / 축소 할 수 있는 기능을 만들어 보자.

HTML

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

CSS

.workspace {
  height: 100vh;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
}

JS

MDN 에 따르면 'mousewheel' 이벤트는 비표준이며, 'wheel'로 대체되었다고 한다.
(참고 : wheel 이벤트와 scroll 이벤트는 다르다.)

IE, 크롬, 사파리 등의 브라우저는 wheel 이벤트를 사용하지만.
파이어폭스 브라우저는 'wheel' 대신 'DOMMouseScroll' 이벤트를 사용한다.

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)})`;
  }
});

DEMO