jQuery
jQuery를 활용하여 DIV 및 브라우저 창의 스크롤의 끝 이벤트 알아내기
InspiredJW
2012. 3. 22. 13:57
요즘 보다 발전된 UI/UX를 적용하는게 추세입니다.
최근 들어 마우스 스크롤을 끝까지 내리면 알아서
일정량의 글을 밑에다 붙이는 방식으로 구현된 게시판이나 사이트를 많이 볼 수 잇습니다.
일반적으로 버튼으로 구현되어 글을 더 보고 싶을 때
"더 보기" 버튼을 클릭하여
다음 글을 AJAX요청을 해서 글을 보여주는 DIV 안에
jQuery의 append 함수 등을 이용해 뒤에 붙이는 방법이 있습니다.
사용자가 스크롤을 아래까지 내렸을 때
자동으로 글 더보기 효과를 낼 수 있다면
더욱 멋지겠지요.
"문제는 사용자가 스크롤을 아래까지 내렸을 때" 이벤트를 캐치하는 것입니다.
브라우저창 끝 이벤트
DIV 끝 이벤트
위 처럼 하면
특정 DIV 태그 안에서 스크롤 할 때 맨 끝에 닿았을 때 이벤트와
브라우저 창을 스크롤 할 때 맽 끝에 닿았을 때 이벤트를 캐치할 수 있습니다.
예제보기
최근 들어 마우스 스크롤을 끝까지 내리면 알아서
일정량의 글을 밑에다 붙이는 방식으로 구현된 게시판이나 사이트를 많이 볼 수 잇습니다.
일반적으로 버튼으로 구현되어 글을 더 보고 싶을 때
"더 보기" 버튼을 클릭하여
다음 글을 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 태그 안에서 스크롤 할 때 맨 끝에 닿았을 때 이벤트와
브라우저 창을 스크롤 할 때 맽 끝에 닿았을 때 이벤트를 캐치할 수 있습니다.
예제보기