https://smwiki.info/index.php?action=history&feed=atom&title=Javascript%3A%EB%AC%B4%ED%95%9C_%EC%8A%A4%ED%81%AC%EB%A1%A4%EB%A7%81
Javascript:무한 스크롤링 - 편집 역사
2026-05-05T10:29:41Z
이 문서의 편집 역사
MediaWiki 1.45.1
https://smwiki.info/index.php?title=Javascript:%EB%AC%B4%ED%95%9C_%EC%8A%A4%ED%81%AC%EB%A1%A4%EB%A7%81&diff=4742&oldid=prev
Sam: 새 문서: {{Javascript}} == 개요 == 페이스북 등에서 주로 이용되는 전략. 스크롤링 하여 아랫바닥에 닿으면 새로운 컨텐츠를 추가하여 넣는다. 스크...
2021-06-13T06:38:33Z
<p>새 문서: {{Javascript}} == 개요 == 페이스북 등에서 주로 이용되는 전략. 스크롤링 하여 아랫바닥에 닿으면 새로운 컨텐츠를 추가하여 넣는다. 스크...</p>
<p><b>새 문서</b></p><div>{{Javascript}}<br />
<br />
== 개요 ==<br />
페이스북 등에서 주로 이용되는 전략. 스크롤링 하여 아랫바닥에 닿으면 새로운 컨텐츠를 추가하여 넣는다.<br />
<br />
<br />
스크롤 이벤트를 이용한다.<br />
{| class="wikitable"<br />
|+<br />
!과정<br />
!설명<br />
!방법<br />
|-<br />
|Html<br />
|html 안의 input 태그에 페이지 수를 기입한다.<br />
여기에서 페이지 카운팅을 한다.<br />
|<syntaxhighlight lang="html"><br />
<input type="hidden" id='page' value='0'><br />
</syntaxhighlight><br />
|-<br />
|JS<br />
|자바스크립트로 스크롤이벤트를 이용한다.<br />
|<syntaxhighlight lang="javascript"><br />
calMore(pageValue){ // 다음 페이지의 내용을 불러오는 함수.<br />
$.ajax({<br />
type:'post',<br />
url:'...',<br />
data:'pageValue'<br />
})<br />
}<br />
<br />
<br />
if(scrollHeight >= documentHeight){<br />
let pager = document.querySelector('#page');<br />
let pageValue = document.querySelector('#page').value; // pager에서 value값을 실시간으로 갱신하지 못하고 처음 값만 가져와서 따로 정의해준다.<br />
pager.value = parseInt(pagevalue)+1; // 현재 페이지값에 1을 더해 태그에 반영한다.<br />
if(pageValue>10){<br />
return; // 10페이지가 넘어가면 멈추게 한다.<br />
}<br />
callMore (pagevalue);<br />
}<br />
</syntaxhighlight><br />
|-<br />
|<br />
|<br />
|<br />
|}</div>
Sam