html5 : 끝이없는 스크롤 표현하기

sns나 카페앱에서 자주 볼 수 있는 한없는 스크롤 리스트를 만들어 보자.

[결과화면]

처음 로딩시 오른쪽 스크롤을 보면 컨텐츠가 길어보이지 않는다.

스크롤을 아래로 내리는 것만으로 총 10개의 이미지를 보고 끝이난다.

스크롤이 상당히 아래로 내려왔음을 볼 수 있다.

[소스]

<!-- doctype을 선언하지 않으면 브라우저는 쿼크모드로 동작해 높이 함수인 $(window).height()가 동작하지 않는다 --> <!-- 스크롤이 없는 리스트는 전체 콘텐츠를 미리 로드한 것처럼 착각을 불러일으킨다 --> <!-- 스크롤이 없는 리스트는 사용자가 일반 스크롤을 사용했을 때 다음 페이지의 버튼을 찾게 되는 동작을 피할 수 있다 --> <!-- 전체페이지를 한꺼번에 로딩하지 않아도 된다 --> <!-- 핵심기술은 사용자의 스크롤을 감시해 페이지 끝에 다다랐는지를 알아내는데에 있다 --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> var data = [{"url":"http://www.sinzi.net/sinzi/image/m_t_img_logo.gif"}, {"url":"http://www.riamore.net/img/common/top_logo1.gif"}, {"url":"http://img.naver.net/static/www/u/2013/0731/nmms_224940510.gif"}, {"url":"http://icon.daumcdn.net/w/icon/1312/19/152729032.png"}, {"url":"http://img.imbc.com/commons/images/gnb/logo.png"}, {"url":"http://www.sinzi.net/sinzi/image/m_t_img_logo.gif"}, {"url":"http://www.riamore.net/img/common/top_logo1.gif"}, {"url":"http://img.naver.net/static/www/u/2013/0731/nmms_224940510.gif"}, {"url":"http://icon.daumcdn.net/w/icon/1312/19/152729032.png"}, {"url":"http://img.imbc.com/commons/images/gnb/logo.png"}]; </script> <!-- 예제를 위한 샘플 스타일 --> <style type="text/css"> /* Artificially makes the pages visible - can be removed */ div.page { height: 1200px; width: 800px; background-color:#f1f1f1; margin:0.3em; } div.error { color: #f00; } </style> <!-- 콘텐츠의 위치 --> <div id="content"></div> <!-- * div 아래에서 스크립트 구현을 해줘야 한다 --> <script type="text/javascript" src="./js/noScrollList.js"></script>

[js]

(function() { // Our page getter calls the callback with a null error // argument and a simple string as content, but it can also // be an Ajax request. var page = 0; /* TODO : 아작스로 페이징처리하기 샘플코드 function getPage(cb) { $.get('/pages/' + page) .success(function(html) { cb(null, html); }) .error(function() { cb("Error"); } page += 1; } */ // 콜백함수 처리 (파라메터로 함수를 받는다) function getPage(cb) { // TODO : 페이지 제한을 10으로 두고, 10페이지가 넘어가면 다음페이지가 없다는 것을 알려준다. // if (page <= 10) cb(null, 'Page ' + page); // 데이터 총 갯수만큼 스크롤 될 수 있도록 한다. if (page < data.length) cb(null, "<img src='"+data[page].url+"' />"); // TODO : 미리 가져온 데이터를 다 사용했다면, 다음 데이터를 가져올 수 있도록 수정 else cb("No more pages"); page += 1; }; var currentlyLoading = false; // When triggerPxFromBottom pixels remain to be scrolled, // start loading the next page. // 다음페이지 로딩 시작을 설정한다. // 이 변수의 값이 0이면 사용자가 현재 페이지의 끝에 도달해 로딩 작업을 시작해야 한다는 것을 의미한다. var triggerPxFromBottom = 0; // loadNext appends the next page into the #content div. // 다음페이지를 #contnet div에 붙이는 작업을 한다. function loadNext() { currentlyLoading = true; getPage(function(err, html) { // If there was an error loading the next page, indicate // the error to the user and stop loading pages. if (err) { $("<div />") .addClass('error') .html(err) .appendTo("#content"); } else { $("<div />") .addClass('page') .html(html) .appendTo("#content"); currentlyLoading = false; } }); } // This event handler is called when the page is scrolled in any way, // 스크롤 이벤트 // 스크롤의 픽셀수 계산 $(window).on('scroll', function() { var remainingPx = $(document).height() - $(window).scrollTop() - $(window).height(); // If no pixels remaining to be scrolled if (remainingPx <= triggerPxFromBottom && !currentlyLoading) loadNext(); }); // 첫번째 페이지 로드 loadNext(); }());