HTML DOM의 WheelEvent deltaY 속성은 사용자가 마우스 휠을 어느 방향으로 스크롤했는지에 따라 부호가 있는 숫자(signed number)를 반환합니다. 사용자가 아래로 스크롤하면 양수, 위로 스크롤하면 음수가 반환되며, 가로 방향 등 다른 방향으로 스크롤하는 경우에는 0이 반환됩니다.
구문(Syntax)
다음은 deltaY 속성의 기본 구문입니다 −
부호가 있는 숫자 반환하기
event.deltaY
반환값 정리
- 양수(+): 사용자가 아래 방향으로 스크롤한 경우
- 음수(−): 사용자가 위 방향으로 스크롤한 경우
- 0: 세로 방향이 아닌 다른 방향으로 스크롤한 경우
참고로 같은 이벤트 객체에는 가로 스크롤 값을 나타내는 deltaX, 그리고 Z축(핀치 줌 등) 값을 나타내는 deltaZ 속성도 함께 제공됩니다.
예제
HTML DOM WheelEvent deltaY 속성의 실제 동작을 확인할 수 있는 예제를 살펴보겠습니다 −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM WheelEvent deltaY</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-deltaY</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>
출력 결과
div 요소를 아래 방향으로 스크롤한 경우 − 요소가 축소되고 색상과 모서리가 변경됩니다.
div 요소를 위 방향으로 스크롤한 경우 − 요소가 확대되고 배경색과 모서리가 변경됩니다.
reset 버튼을 클릭한 경우 − 요소가 초기 상태로 복원됩니다.
