[그누보드] AJAX 활용 게시판 무한스크롤 기능 구현

필요에의해 갤러리형태의 게시판의 리스트를 무한으로 구현해야 했다.

잘 찾아보니 http://webpaper.kr/show/98&page=1&stx=%EC%8A%A4%ED%81%AC%EB%A1%A4 에서 

개발 후 방법을 공유하신게 있어서 커스터마이징 후 기록을 위해 남김

 

 

게시판 스킨/list.skin.php 하단에 아래 코드를 넣어준다. 

물론 게시판 형태에 따라 일부 수정은 해야한다. 

게시판에 리스트 영역의 다음페이지를 불러와 코드를 붙이는 방식.

<script>
var total_page = "<?=$total_page?>";
var now_page = "<?=$page?>";
var roll_page = now_page;


$(window).scroll(function() {
    var chkBtm = parseInt($(document).height()) - parseInt($(window).height());

    if (chkBtm == $(window).scrollTop()) {
        roll_page++;
        if (roll_page <= total_page) {
            callContent(roll_page, 'append');
        }
    } else if ($(window).scrollTop() == 0) {
        now_page--;
        if (now_page > 0) {
            callContent(now_page, 'prepend');
        }
    }
});

function callContent(a, b) {

    var url = "<?=G5_BBS_URL?>/board.php?bo_table=<?=$bo_table?>&page=" + a;
    var tbody = "";
    var thtml = "";
    $.ajax({
        type: "POST",
        url: url,
        dataType: "html",
        success: function(html) {
            tbody = html.split('<article>');
            thtml = tbody[1].split('</article>');
            setTimeout(function() {
                if (b == 'append') {
                    // $(".tbl_head01").find('tbody').append(thtml[0]);
                    $("#fboardlist").append(thtml[0]);

                } 
            }, 1000);

        },
        error: function(xhr, status, error) {
            alert(error);
        }
    });
}
</script>

아래는 최하단 스크롤 부분. 

$(window).scroll(function(){
     
    // 최하단일 경우를 체크하기 위해 최하단 위치값을 지정
    // 화면 문서전체의 길이에서, 현재 창 높이를 뺀 것이 최하단 값
    var chkBtm = parseInt($(document).height()) - parseInt($(window).height());
     
    if(chkBtm == $(window).scrollTop()){        
        // 최하단으로 도달했을 경우
        console.log('바닥입니다!');
    }else if($(window).scrollTop() == 0){
        // 최상단으로 도달했을 경우
        console.log('꼭대기입니다!');
    }
});