[JavaScript] 스크롤에 따른 이벤트

 

이벤트 리스너(Event Listener) 등록하기

자바스크립트에는 addEventListener라는 아주 유용한 메서드가 있습니다. 특정 요소(혹은 브라우저 창 전체)에서 발생하는 동작을 감시하는 역할을 하죠.

• 대상: 누구를 감시할 것인가? (여기서는 브라우저 창인 window)
• 종류: 어떤 동작을 감시할 것인가? (여기서는 scroll)
• 할 일: 동작이 발생하면 무엇을 할 것인가? (함수 실행)

---

• window.scrollY: 현재 스크롤된 양 (이미 지나간 높이)
• window.innerHeight: 브라우저 창의 높이 (지금 눈에 보이는 높이)
• document.body.offsetHeight: 문서 전체의 실제 높이

---

 

window.addEventListener('scroll', function() {
  // 1. 필요한 수치들을 가져옵니다.
  let scrollLocation = window.scrollY; // 현재 스크롤 위치
  let windowHeight = window.innerHeight; // 창의 높이
  let fullHeight = document.body.offsetHeight; // 전체 문서 높이

  // 2. 바닥에 도달했는지 확인하는 조건을 완성해봅시다.
  // 여유값으로 100px 정도를 빼주면 바닥에 닿기 조금 전에 실행됩니다.
  if (scrollLocation + windowHeight >= fullHeight - 100) {
    
    // 3. 여기에 무엇을 하면 좋을까요?
    console.log("바닥에 거의 닿았습니다! 다음 데이터를 불러올게요.");
    // 이전에 배운 '데이터 가져오기' 함수를 여기서 호출하면 되겠죠?
  }
});

 

setTimeout 함수를 사용하여 스크롤 이벤트를 너무 자주 실행하지 못하게 막기

※ 스크롤을 할 때마다 이 함수가 너무 자주 실행되어서 브라우저가 버벅거리는 현상 막기

let isWaiting = false; // "지금 실행 중인가?"를 체크하는 바구니

window.addEventListener('scroll', function() {
  // 1. 만약 대기 중(isWaiting이 true)이라면, 함수를 실행하지 않고 그냥 나갑니다.
  if (isWaiting) return;

  // 2. 대기 중이 아니라면, 로직을 실행합니다.
  console.log("스크롤 감지 및 계산 중...");
  
  // 3. 로직을 실행했으니, '대기 중' 상태로 바꿉니다.
  isWaiting = true;

  // 4. 일정 시간(예: 0.3초) 뒤에 다시 '대기 중'을 해제합니다.
  setTimeout(function() {
    isWaiting = false;
  }, 300); // 300ms = 0.3초
});

 

 

※ 해당 내용은 Google Gmini3.0과 함께 공부한 내용입니다.