Javascript:무한 스크롤링 편집하기 (부분)

== 개요 ==
페이스북 등에서 주로 이용되는 전략. 스크롤링 하여 아랫바닥에 닿으면 새로운 컨텐츠를 추가하여 넣는다.


스크롤 이벤트를 이용한다.
{| class="wikitable"
|+
!과정
!설명
!방법
|-
|Html
|html 안의 input 태그에 페이지 수를 기입한다.
여기에서 페이지 카운팅을 한다.
|<syntaxhighlight lang="html">
<input type="hidden" id='page' value='0'>
</syntaxhighlight>
|-
|JS
|자바스크립트로 스크롤이벤트를 이용한다.
|<syntaxhighlight lang="javascript">
calMore(pageValue){  // 다음 페이지의 내용을 불러오는 함수.
    $.ajax({
        type:'post',
        url:'...',
        data:'pageValue'
    })
}


if(scrollHeight >= documentHeight){
    let pager = document.querySelector('#page');
    let pageValue = document.querySelector('#page').value;  // pager에서 value값을 실시간으로 갱신하지 못하고 처음 값만 가져와서 따로 정의해준다.
    pager.value = parseInt(pagevalue)+1;  // 현재 페이지값에 1을 더해 태그에 반영한다.
    if(pageValue>10){
        return;  // 10페이지가 넘어가면 멈추게 한다.
        }
    callMore (pagevalue);
}
</syntaxhighlight>
|-
|
|
|
|}