HTML DOM의 WheelEvent deltaX 속성은 사용자가 마우스 휠을 이용해 왼쪽 또는 오른쪽으로 스크롤할 때, 그 방향에 해당하는 부호 있는 숫자(signed number)를 반환합니다. 만약 사용자가 다른 방향(위·아래 등)으로 스크롤한다면 이 속성은 0을 반환합니다.
일반적으로 deltaX 값이 양수면 오른쪽 스크롤, 음수면 왼쪽 스크롤을 의미하며, 이를 활용하면 가로 방향 스크롤에 반응하는 인터랙티브한 웹 요소를 쉽게 만들 수 있습니다.
구문(Syntax)
다음은 deltaX 속성의 기본 구문입니다 −
event.deltaX
부호 있는 숫자 형태로 값을 반환하며, 별도의 매개변수는 필요하지 않습니다.
예제(Example)
이제 HTML DOM WheelEvent deltaX 속성을 실제로 활용한 예제를 살펴보겠습니다. 아래 코드는 div 요소 위에서 스크롤 방향에 따라 요소를 확대·축소하거나 좌우로 이동시키는 예제입니다 −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM WheelEvent deltaX</title>
<style>
* {
padding: 2px;
margin:5px;
}
form {
width:70%;
margin: 0 auto;
text-align: center;
}
input[type="button"] {
border-radius: 10px;
}
#content {
width: 80px;
height: 80px;
margin: 20px 0 0 50px;
background-color: #dc3545;
transition: all 2s ease-in-out;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-WheelEvent-deltaX</legend>
<div id="content" onwheel="setControls(event)"></div>
<input type="button" value="reset" onclick="resetCSS()">
<div id="divDisplay">Scroll over div element</div>
</fieldset>
</form>
<script>
var playDiv = document.getElementById("content");
var count = 40;
function setControls(event) {
var valX = event.deltaX;
var valY = event.deltaY;
if(valY>0){
playDiv.style.transform = "scale(0.5)";
playDiv.style.backgroundColor = "rgba(0, 188, 212, 0.47)";
playDiv.style.borderRadius = "50%";
}
else if(valY<0){
playDiv.style.transform = "scale(1.5)";
playDiv.style.backgroundColor = "rgba(0, 188, 0, 0.47)";
playDiv.style.borderRadius = "0px";
}
else if(valX>0){
count+=40;
playDiv.style.transform = "translateX("+count+"px)";
}
else{
count-=40;
playDiv.style.transform = "translateX("+count+"px)";
}
}
function resetCSS(){
count = 40;
var st = "width: 80px;height: 80px;margin: 20px 0 0 50px;background-color:
#dc3545;transition: all 2s ease-in-out;";
playDiv.style = st;
}
</script>
</body>
</html>코드 동작 원리
- valY > 0 (아래로 스크롤): 요소가 축소되고 배경색이 청록색으로 변하며 둥근 원형이 됩니다.
- valY < 0 (위로 스크롤): 요소가 확대되고 배경색이 초록색으로 변하며 각진 형태로 돌아옵니다.
- valX > 0 (오른쪽 스크롤): 요소가 X축 방향으로 40px씩 오른쪽으로 이동합니다.
- 그 외 (왼쪽 스크롤): 요소가 X축 방향으로 40px씩 왼쪽으로 이동합니다.
출력 결과(Output)
div 요소 위에서 왼쪽 방향으로 스크롤할 경우 −
div 요소 위에서 오른쪽 방향으로 스크롤할 경우 −
리셋(reset) 버튼 클릭 시 −
함께 알아두면 좋은 관련 속성
- deltaY: 세로(위·아래) 방향 스크롤 값을 나타냅니다.
- deltaZ: Z축 방향의 스크롤 값으로, 핀치 줌 같은 제스처에서 사용됩니다.
- deltaMode: 스크롤 값의 측정 단위(픽셀, 라인, 페이지)를 나타냅니다.
WheelEvent의 deltaX 속성을 활용하면 이미지 갤러리의 가로 스크롤, 캐러셀(carousel) 제어, 지도 확대·이동 등 다양한 인터랙티브 UI를 손쉽게 구현할 수 있습니다.