[JS]자바스크립트 스크롤이벤트-좌표가져오기, 휠 업다운 확인

자바스크립트에서 스크롤 이벤트를 적용하기 위한 방법을 적어본다.

현재 스크롤 위치 가져오기

window객체를 이용하여 현재 스크롤 위치를 가져올 수 있다.

window.addEventListener("scroll", (e) => {
  console.log("y", window.scrollY);
})

스크롤을 할 때마다 현재 Y값을 px로 출력한다.
좌우는 scrollX로 사용하면 된다.
스크롤 할 때마다 작동되는 함수라 성능이슈가 발생할 수도 있으니
상황에 따라 throttle을 적용하자

이를 활용한 샘플은 다음과 같다.

// example
// scrolly가 100px 초과하면 element에 'class'라는 class 삽입
if (window.scrollY > 100) {
 element.classList.add('class')
 }

스크롤 업/다운 실행여부 확인

window.addEventListener("wheel", (e) => {
  console.log(e.deltaY, e.deltaX);
}

휠 업다운 시, 이동된 px로 출력한다.
양수면 휠 다운 / 음수는 휠 업

이를 활용하여 각종 이벤트를 적용할 수 있다.

// example
// 휠다운이 발생되면 element에 'active'라는 class삽입
if (e.deltaY > 1) {
    element.classList.add("active");

끝.