HTML에서 onwheel 속성은 사용자가 특정 요소 위에서 마우스 휠을 스크롤하는 순간 자동으로 트리거됩니다. 이 속성을 활용하면 요소 위에서의 휠 동작에 반응하여 원하는 자바스크립트 함수를 실행할 수 있습니다.
onwheel 속성이란?
onwheel은 HTML 요소에 직접 지정할 수 있는 이벤트 핸들러 속성으로, 마우스 휠(또는 터치패드의 스크롤 제스처)이 해당 요소 영역 위에서 움직일 때 지정된 스크립트를 호출합니다.
예제 코드
아래 코드를 실행하면 div 요소 위에서 마우스 휠을 굴릴 때 알림 창이 나타나는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id = "myDIV" onwheel = "display()">데모 텍스트입니다. 여기서 마우스 휠을 굴려보세요.</div>
<script>
function display() {
alert("마우스 휠이 사용되었습니다!");
}
</script>
</body>
</html>동작 방식 설명
위 예제에서 div 요소에는 onwheel = "display()"가 설정되어 있습니다. 사용자가 해당 div 영역 위에서 마우스 휠을 스크롤하면 display() 함수가 호출되고, 이 함수 내부의 alert()가 실행되어 경고 메시지가 화면에 표시됩니다.
참고 사항
onwheel 이벤트는 취소 가능(cancellable)하지만, 기본적으로 수동적(passive) 리스너로 처리되는 경우가 많아 페이지 스크롤을 막으려면 addEventListener와 함께 { passive: false } 옵션을 사용해야 할 수 있습니다. 또한 모바일 환경에서는 터치패드나 터치 스크롤에 따라 동작이 다를 수 있으므로 실제 서비스에서는 다양한 기기에서 테스트하는 것이 좋습니다.