블로그를 한창 할때, 믹시의 스크롤 페이징을 보고서 어떻게 하는 건지 참 많이 궁금해 했던 기억이 납니다. 
졸립기도 하고 갑자기 스크롤 페이징이 생각 나서 검색해봤는데 쭌스님의 포스팅과 Raj Gorsia님의 포스팅을 찾게 되었습니다. 스크립트 라이브러리를 사용하지 않는다면 쭌스님의 글을 참고해서 작성하면 되겠고 JQuery를 사용한다면 Raj Gorsia님의 글을 거의 그대로 사용하면 되겠네요.

예전에 제가 감을 잡지 못 했던 부분은 아래 한줄입니다. ㅠ.ㅠ
if ($(window).scrollTop() == $(document).height() - $(window).height()) { 
또는
if(content.scrollTop < content.scrollHeight - 500)
이렇게 간단한데 말이죠... 

지금은 응용할만한 프로그램을 만들지 않지만 다음에 꼭 활용해서 만들어 보고 싶네요. 


 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>JQuery</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
<script type="text/javascript" src="jquery-1.6.min.js"></script>
<script type="text/javascript">
//<![CDATA[
var pageLoaded = 1; //현재 페이지

$(window).scroll( function() {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
pageLoaded = pageLoaded + 1; 
// ajax를 추가해서 목록을 받아온다
// alert(pageLoaded);
$('#main_content').append(
"main_content"+pageLoaded+"<br><br><br><br><br><br><br><br><br><br><br><br><br>");
}
});
//]]>
</script>

<style type="text/css">

</style>

</head>
<body>
<div id="top_menu">
<ul id="topUL">
<li class="to_home"><a href="/">HOME</a></li>
<li class="top_menu_li" id="login_btn">로그인</li>
<li class="top_menu_li"> | </li>
<li class="top_menu_li" id="join_btn">회원가입</li>
</ul>
</div>
<div id="wrap">
<div id="left_menu">left_menu</div>
<div id="content">
<div id="login_box">login_box</div>
<div id="join_box">join_box</div>
<div id="main_content">
main_content1<br><br><br><br><br><br><br><br><br><br><br><br><br>
main_content2<br><br><br><br><br><br><br><br><br><br><br><br><br>
main_content3<br><br><br><br><br><br><br><br><br><br><br><br><br>
main_content4<br><br><br><br><br><br><br><br><br><br><br><br><br>
main_content5<br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div id="right_menu">right_menu</div>
</div>
</body>
</html>