Scroll to Zoom
마우스 스크롤 휠 이벤트를 이용하여, DOM 이벤트 조작 & CSS 변환으로 작업 영역을 확대 / 축소 할 수 있는 기능을 만들어 보자.
<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;
}
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)})`;
}
});