[JQuery] 스크롤 내리면 다음 글 불러오기 (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 = '<img src="https://t1.daumcdn.net/cfile/tistory/9940D03D5A584CCD0C"><br />';
imgs += '<img src="https://t1.daumcdn.net/cfile/tistory/99F7323D5A584CCE1C"><br />';
imgs += '<img src="https://t1.daumcdn.net/cfile/tistory/99E6DF3E5A584CD311"><br />';
 
$(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);
        }
    });
});