jQuery를 활용하여 DIV 및 브라우저 창의 스크롤의 끝 이벤트 알아내기

요즘 보다 발전된 UI/UX를 적용하는게 추세입니다.



최근 들어 마우스 스크롤을 끝까지 내리면 알아서

일정량의 글을 밑에다 붙이는 방식으로 구현된 게시판이나 사이트를 많이 볼 수 잇습니다. 




일반적으로 버튼으로 구현되어 글을 더 보고 싶을 때

"더 보기" 버튼을 클릭하여

다음 글을 AJAX요청을 해서 글을 보여주는 DIV 안에

jQuery의 append 함수 등을 이용해 뒤에 붙이는 방법이 있습니다.




사용자가 스크롤을 아래까지 내렸을 때

자동으로 글 더보기 효과를 낼 수 있다면

더욱 멋지겠지요.





"문제는 사용자가 스크롤을 아래까지 내렸을 때"  이벤트를 캐치하는 것입니다.






브라우저창 끝 이벤트

$(window).scroll(function() {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
        alert('End of Window');
    }
});​

DIV 끝 이벤트

$("#inside").scroll( function() {
  var elem = $("#inside");

  if ( elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight())
    {
        alert("End of Yellow");
    }
});

위 처럼 하면

특정 DIV 태그 안에서 스크롤 할 때 맨 끝에 닿았을 때 이벤트와

브라우저 창을 스크롤 할 때 맽 끝에 닿았을 때 이벤트를 캐치할 수 있습니다.




예제보기