[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