javascript 스크롤 이벤트 를이용한 리스트 붙이기.

게시물이나 다른 리스트 를 출력해야하는 경우 게시물 더보기버튼을 만들지 않고 스크롤을이용 다음 게시물 리스트를 가져와서 붙이기.

부족하지만 직접 짠코드로 필요한사람만 가져다 쓰세요.


1.전역 변수로 dataRendering 기본값을 선언한다.

var dataRendering = false;

2.레디 함수에 스크롤 이벤트를 선언한다.

$(document).scroll(function() {
var maxHeight = $(document).height();
var currentScroll = $(window).scrollTop() + $(window).height();
if (maxHeight <= currentScroll + ($(document).height()/2)) {

if(!dataRendering){
dataRendering = true;

func();
}
}
});

//주의
스크롤이벤트는 정확한 위치값일때 함수가 실행되지 않는다. 즉
maxHeight == currentScroll + ($(document).height()/2) 위와 같이 조건을 줄경우 해당 함수가 실행되지 않을수도 있다.
따라서 작거나 같을 때 무조건 실행하되 dataRendering 이란 변수를 추가하여 필요한 경우만 비지니스 로직을 수행하기로 한다.
//--주의

3.func()에서 ajax 로 데이터를 가져와서 붙힌후 dataRendering  = false; 로 다시 셋팅 해준다. 그러면 데이터를 가져오는 도중에 스크롤 이벤트가 발생하여도 dataRendering 가 true 이기때문에 추가적으로 요청을 날리지 않는다.