[JQuery] 스크롤이벤트,페이징 이벤트

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

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

예제

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);
        }
    });
});


> 모바일 스크롤 페이지 구현, 페이징 (scroll paging) 만들기

```javascirpt
var _temp = 1;
var page = 0;
$(document).scroll(function(){
	if(!$hash.j_idx)
	{
		var max_height = $(document).height();
		var now_height = $(window).scrollTop() + $(window).height();

		//끝에 닿기전에 미리 함수실행
		if((max_height <= now_height + 400) && _temp == 1)
		{
			page = page + 1;
			get_list();
		}
	}
});

//데이터 가져오는 함수

function get_list()

{
	//데이터처리..
	//더해진 page 값으로 가져올 page확인
	//마지막 페이지인경우 _temp의 값을 0으로 바꾸어준다
	if(!data) _temp = 0;
}