스크롤 페이징(paging with scroll)

흔한 기술이지만, 종종 사용할 때마다 오류를 마주하게된다.

이번에도 역시, jquery를 주로 사용하는데, scrollTop이 undefined 가 돌아온다 ㅜㅜ

 

그래서, 이 영역만 pure javascript를 사용하였다.

코드는 아래와 같이...

 

<script>

var page = 1;

var itemsPerPage = 50;

document.addEventListener("DOMContentLoaded", function(){

    const gridwrap = document.querySelector("#gridwrap");

    gridwrap.addEventListener("scroll", (event) =>{

        if(gridwrap.scrollTop + gridwrap.offsetHeight >= gridwrap.offsetHeight - 380){

            page++;

            fn_Search();

        }

    })

});

function fn_Search(){

    //여기서 ajax 호출 시 parameter에 page, itemsPerPage 포함

}

</script>

<div id="gridwrap" style="width:500px;height:380;">

<table>

    <thead>

        <tr>

            <th></th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td></td>

        </tr>

    </tbody>

</div>