JavaScript

[DOM_Event] JS - wheel 이벤트 (= onwheel속성) ★ - 마우스휠 스크롤 이벤트

목차
  1. wheel 예제 - 마우스휠 이벤트 (HTML 속성 방식)
  2. wheel 정의
  3. wheel 구문
  4. wheel 예제 - 마우스휠 이벤트 (JS 속성 방식)
  5. wheel 예제 - 마우스휠 이벤트 (JS 메서드 방식)
  6. wheel 예제 - 마우스휠로 가로스크롤 이동

 

wheel 예제 - 마우스휠 이벤트 (HTML 속성 방식)

※ 마우스휠 움직이면 글자 커짐.

 

<style>

#hz {

  border: 1px solid black;

}

</style>


<div id="hz" onwheel="homzzang()">홈짱닷컴 Homzzang.com<br>코딩언어 강의<br>그누보드 강의<br>서버관리 강의<br>재밌는 노래 소개</div>


<script>

function homzzang() {

  document.getElementById("hz").style.fontSize = "30px";

}

</script>

 

결과보기 


wheel 정의

 

아래 경우에 이벤트 발생.

  • 사용자가 마우스휠을 위 또는 아래로 굴릴 때 발생.
  • 사용자가 터치패드(예: 랩톱의 "마우스") 사용해 요소를 스크롤하거나 확대 또는 축소할 때도 발생.

 


 

1.

  • 이벤트확산: O
  • 취소가능성: O
  • 이벤트타입: WheelEvent
  • 지원HTML: 모든 HTML 요소
  • DOM 버전: Level 3 Events

 

2.

마우스휠 스크롤 양 표시 속성

  • deltaX 속성: X축 기준 마우스휠 스크롤량
  • deltaY 속성: Y축 기준 마우스휠 스크롤량 ★
  • deltaZ 속성: Z축 기준 마우스휠 스크롤량

 

3.

mousewheel 이벤트는 폐기예고 (Deprecated) 됨.

앞으로는 wheel 이벤트 사용.

 

4.

IE9 이상 주요 최신 브라우저 모두 지원.

  • Safari는 지원 X
  • IE 경우, 휠 이벤트는 addEventListener() 메서드 방식만 지원. (∵ DOM 객체엔 onwheel 속성 없음.)

 

 

wheel 구문

 

HTML 속성 방식

<element onwheel="homzzang()">

 

JS 속성 방식

object.onwheel = function(){homzzang()};

 

JS 메서드 방식 (★ 권장 방식)

object.addEventListener("wheel", homzzang);

 

 

wheel 예제 - 마우스휠 이벤트 (JS 속성 방식)

 

<style>

#hz {

  border: 1px solid black;

}

</style>


<div id="hz">홈짱닷컴 Homzzang.com<br>코딩언어 강의<br>그누보드 강의<br>서버관리 강의<br>재밌는 노래 소개</div>


<script>

document.getElementById("hz").onwheel = function() {homzzang()};


function homzzang() {

  document.getElementById("hz").style.fontSize = "30px";

}

</script>

 

결과보기

 

wheel 예제 - 마우스휠 이벤트 (JS 메서드 방식)

 

<style>

#hz {

  border: 1px solid black;

}

</style>


<div id="hz">홈짱닷컴 Homzzang.com<br>코딩언어 강의<br>그누보드 강의<br>서버관리 강의<br>재밌는 노래 소개</div>


<script>

document.getElementById("hz").addEventListener("wheel", homzzang);


function homzzang() {

  this.style.fontSize = "20px";

}

</script>

 

결과보기

PS. HTML 속성 방식이나 JS 속성 방식 경우엔, this 키워드 사용 시 작동 X

 

wheel 예제 - 마우스휠로 가로스크롤 이동

 

<style>

html,

body {

  margin: 0;

  font-family: sans-serif;

}


main {

  overflow-x: hidden;

  display: flex;

}


h1 {

  margin: 0;

  padding: 0;

}


section {

  min-width: 50vw;

  min-height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 4ch;

}


section:nth-child(even) {

  background-color: teal;

  color: white;

}


.read-article{

  position: absolute;

  top: 10px;

  left: 10px;

  z-index: 999;

  color: #000;

  background: white;

  padding: 10px 20px;

  border-radius: 10px;

  font-family: arial;

  text-decoration: none;

  box-shadow: rgb(50 50 93 / 25%) 0 0 100px -20px, rgb(0 0 0 / 30%) 0 0 60px -15px;

}

.read-article:hover{

    background: #d5d5d5;

    box-shadow: rgb(50 50 93 / 25%) 0 0 100px -20px, rgb(0 0 0 / 30%) 0 0 60px 0px;

}

iframe[sandbox] .read-article{

  display: none;

}

</style>

<main>

  <section>

    <h1>A</h1>

  </section>

  <section>

    <h1>B</h1>

  </section>

  <section>

    <h1>C</h1>

  </section>

    <section>

    <h1>D</h1>

  </section>

</main>


<a href="https://alvarotrigo.com/blog/scroll-horizontally-with-mouse-wheel-vanilla-java/" target="_blank" class="read-article">

  마우스휠로 가로스크롤 이동

</a>

<script>

const scrollContainer = document.querySelector("main");


scrollContainer.addEventListener("wheel", (evt) => {

    evt.preventDefault();

    scrollContainer.scrollLeft += evt.deltaY;

});

</script>

 

결과보기

https://codepen.io/alvarotrigo/pen/gOmgRzL


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Basic JS - Home (JS입문) + Javascript Framework (프레임워크) 종류
Basic JS - Intro (JS소개)
Basic JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항
Basic JS - Output (JS출력= JS쓰기) ★★★★★
Basic JS - Syntax (JS구문) ★
Basic JS - Statement (JS구문= JS명령문)
Basic JS - Comment (JS주석)
Basic JS - Variable (JS변수) ★★★★★
Basic JS - Operator (연산자) - JS연산자 ★★★★★
Basic JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형…
Basic JS - Function - JS함수 ★★★★★ ※ 일반함수 특징 2
Basic JS - Object - JS객체 ★★★★★
Basic JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★
Basic JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★
Basic JS - Strings - JS문자열
1/89
목록
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드
제작의뢰 1
Q&A
커뮤니티 2
웹유틸
회원센터
홈짱 PC버전 로그인