[JavaScript] 이벤트(4) - 스크롤의 이벤트

이번 글은 스크롤 이벤트에 대한 글이다.

---

 

[ Scroll 이벤트 ]

스크롤 : 브라우저의 크기보다 웹 문서가 클 때 자동으로 나타남

=> 브라우저를 대변하는 window객체에 이벤트를 등록하는 경우가 많음

// 사용 예시
window.addEventListener('scroll', 함수명);
// => 스크롤 시 함수 실행

 

(스크롤 이벤트 사용 시 윈도우 객체의 내장 프로퍼티 자주 사용 => ex. window.scrollY)

=> window.scrollY : 스크롤된 특정 위치(y값)을 기준으로 이벤트 핸들러가 동작하게 하거나 스크롤 방향이 위인지 아래인지를 기준으로 이벤트 핸들러 동작을 제어 가능

 

 

=> 활용예제

• 일정 높이가 스크롤 다운 되었다면 top 버튼이 생성되어 버튼 클릭 시 위로 한번에 올라갈 수 있는 기능
• 스크롤을 내리는 상황에서는 메뉴바가 사라지고 올리는 상황에서는 메뉴바 생성

 

---