[jQuery] 스크롤 하단 이동시 리스트 추가 이벤트 처리

[jQuery] 스크롤 하단 이동시 리스트 추가 이벤트 처리

화면의 스크롤을 맨 아래로 이동시 리스트가 추가 되는 이벤트 처리 방식입니다.
이벤트 처리를 위한 내용이기에 리스트를 뿌려주는 구현은 생략하겠습니다.

$(window).scroll(function(){
   if($("input[name=eof]").val() == "0")
   {
      if(parseInt($(window).scrollTop() + $(window).height()) >= parseInt($("#footer").offset().top))
      {
         //리스트 추가 함수 호출
      }
   }
});

1. eof라는 이름의 input 엘리먼트는 리스트의 마지막 데이터가 출력되면 0에서 1로 값이 대입되어 데이터가 더 이상 없음에도 불필요한 호출을 막기 위함입니다.

2. eof 값이 0 (데이터가 존재 한다면) 화면의 스크롤과 화면 제일 하단에 있는 엘리먼트 (#footer)의 좌표값을 비교합니다. 스크롤이 #footer의 y좌표를 초과하면 함수가 호출 됩니다.

%d 블로거가 이것을 좋아합니다: