스크롤 내리면 다음 글 불러오기 (scroll 이벤트)

스크롤 이벤트를 인식하는 코드

$('#div01').scroll(function(){
//div01 에서 스크롤변화가 발생할때 호출
});

스크롤을 내려보세요.

예제의 HTML 코드

<div id="div01" style="overflow-y:scroll;">
    <div id="divContent">
        <img src="https://t1.daumcdn.net/cfile/tistory/9940D03D5A584CCD0C"><br />
        <img src="https://t1.daumcdn.net/cfile/tistory/99F7323D5A584CCE1C"><br />
        <img src="https://t1.daumcdn.net/cfile/tistory/9948143D5A584CD10A"><br />
    </div>
</div>

예제의 자바스크립트 코드

//추가될 이미지 태그를 문자열로 변수에 저장
var imgs = 'https://t1.daumcdn.net/cfile/tistory/9940D03D5A584CCD0C>">
';
imgs += 'https://t1.daumcdn.net/cfile/tistory/99F7323D5A584CCE1C>">
';
imgs += 'https://t1.daumcdn.net/cfile/tistory/99E6DF3E5A584CD311>">
';

$(document).ready(function(){
	//스크롤 발생 이벤트 처리
	$('#div01').scroll(function(){
		var scrollT = $(this).scrollTop(); //스크롤바의 상단위치
		var scrollH = $(this).height(); //스크롤바를 갖는 div의 높이
		var contentH = $('#divContent').height(); //문서 전체 내용을 갖는 div의 높이
		if(scrollT + scrollH +1 >= contentH) { // 스크롤바가 아래 쪽에 위치할 때
			$('#divContent').append(imgs);
		}
	});
});
</br ></img src="<</br ></img src="<</br ></img src="<