HTML의 onwheel 이벤트 속성은 사용자가 HTML 문서 내 특정 요소 위에서 마우스 휠(스크롤 휠)을 움직일 때 발생하는 이벤트입니다. 요소 위에서 마우스 휠을 위나 아래로 굴리는 순간 지정된 자바스크립트 코드가 실행됩니다.
onwheel 속성의 기본 문법
onwheel 이벤트 속성은 다음과 같은 형식으로 사용합니다.
<tagname onwheel="script">내용</tagname>
- tagname: 이벤트를 적용할 HTML 태그
- script: 마우스 휠이 움직였을 때 실행할 자바스크립트 함수 또는 코드
HTML onwheel 이벤트 속성 예제
아래 예제는 단락(p) 요소 위에서 마우스 휠을 움직이면 페이지 배경과 글자 색상이 변경되도록 구현한 코드입니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
height: 100vh;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
text-align: center;
padding: 20px;
}
.wheel {
border: 2px solid #fff;
padding: 10px;
}
</style>
</head>
<body>
<h1>HTML onwheel Event Attribute Demo</h1>
<p onwheel='wheelFn()' class='wheel'>This is a paragraph with some dummy content.
This is a paragraph with some dummy content. This is a paragraph with some dummy content.
This is a paragraph with some dummy content. This is a paragraph with some dummy content.
This is a paragraph with some dummy content. This is a paragraph with some dummy content.
This is a paragraph with some dummy content.</p>
<p>위 단락 위에서 마우스 휠을 위아래로 움직여 보세요.</p>
<script>
function wheelFn() {
document.body.style.background = "linear-gradient(45deg, #8BC6EC 0%, #9599E2 100%) no-repeat";
document.body.style.color = "#fff";
}
</script>
</body>
</html>실행 결과
코드를 브라우저에서 실행하면 처음에는 주황색 계열의 그라데이션 배경이 표시됩니다.
이제 단락(p) 요소 위에서 마우스 휠을 위나 아래로 움직여 보세요. onwheel 이벤트가 발생하면서 wheelFn() 함수가 호출되어 배경이 파란색 계열 그라데이션으로 바뀌고, 글자 색상도 흰색으로 변경되는 것을 확인할 수 있습니다.
참고 사항
- onwheel 이벤트는 사용자가 실제로 스크롤을 하지 않더라도 휠만 굴리면 발생합니다.
- 모바일 기기에서는 마우스 휠이 없기 때문에 터치 스크롤과는 별도로 동작하지 않을 수 있으므로, 필요 시 touchmove 이벤트와 함께 고려하는 것이 좋습니다.
- 접근성 측면에서 스크롤 동작을 강제로 막는(preventDefault) 방식은 사용자 경험을 해칠 수 있으므로 주의해서 사용해야 합니다.