[Javascript] 모바일에서 스크롤 이벤트 적용하기

 

◽ PC

window.addEventListener('scroll', handleScrollEvent) // 스크롤 할 때
window.addEventListener('wheel', handleScrollEvent) // 휠을 움직일 때

 

◽ 모바일

window.addEventListener('touchmove', handleScrollEvent)

 

 

 

---

 

 

 

그리고 디바운스(debounce)와 비슷한 느낌의 스로틀(throttle)이 있다.

스크롤 이벤트에서는 스로틀을 많이 적용한다고 한다.

 

- 디바운스: 연속적인 이벤트가 발생하는 경우, 가장 마지막으로 호출된 시점 이후로 일정시간이 지난 후 한번만 실행

- 스로틀: 일정 시간 간격으로 최대 한 번만 실행

 

 

◽ 스로틀 사용하기

window.addEventListener('touchmove', throttle(handleScrollEvent, 100))

// 스로틀 이벤트
const throttle = (fn, delay) => {
  let timer
  return function () {
    if (!timer) {
      timer = setTimeout(() => {
        timer = null
        fn.apply(this, arguments)
      }, delay)
    }
  }
}

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.