글
블로그를 한창 할때, 믹시의 스크롤 페이징을 보고서 어떻게 하는 건지 참 많이 궁금해 했던 기억이 납니다.
졸립기도 하고 갑자기 스크롤 페이징이 생각 나서 검색해봤는데 쭌스님의 포스팅과 Raj Gorsia님의 포스팅을 찾게 되었습니다. 스크립트 라이브러리를 사용하지 않는다면 쭌스님의 글을 참고해서 작성하면 되겠고 JQuery를 사용한다면 Raj Gorsia님의 글을 거의 그대로 사용하면 되겠네요.
예전에 제가 감을 잡지 못 했던 부분은 아래 한줄입니다. ㅠ.ㅠ
지금은 응용할만한 프로그램을 만들지 않지만 다음에 꼭 활용해서 만들어 보고 싶네요.
졸립기도 하고 갑자기 스크롤 페이징이 생각 나서 검색해봤는데 쭌스님의 포스팅과 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>
참조 1 : 스크롤 페이징(Scroll Paging, Continuous scrolling pattern)
참조 2 : Load Content While Scrolling With jQuery
http://www.rtong.net/1148
'JS > jquery' 카테고리의 다른 글
| jQuery Fade In Scroll To Top Button With Smooth Scroll For Blogger (0) | 2012.01.16 |
|---|---|
| Sticky Sidebar jQuery plugin (0) | 2012.01.16 |
| jQuery를 이용해 스크롤바 따라다니는 레이어 만들기(IE6,IE7,IE8,크롬,사파리,파폭) (0) | 2012.01.16 |
| UIScrollView에서 subview의 loading을 lazy하게 만들자 (0) | 2012.01.16 |
| jQuery 스크롤 페이징 (0) | 2012.01.16 |
| How to Mimic the iGoogle Interface (0) | 2009.03.01 |
| The 20 Most Practical and Creative Uses of jQuery (0) | 2009.02.27 |
| jQuery Plugin (0) | 2009.02.23 |
| jQuery 링크에 걸린 파일 사이즈 자동으로 알아내기 (0) | 2009.01.05 |
| jQuery Loading바 구현하기 (0) | 2009.01.05 |
RECENT COMMENT