주메뉴 바로가기 견적문의 바로가기 주내용 바로가기
Blue Red Orange Green Grey
Mobile/HTML5
모바일 웹 스크롤 페이징
입력 2013.03.26 오후 02:17 | 조회 6,942
x-mind
모바일 웹 스크롤 페이징을 구현 하여

간단한 방법이지만 추후 활용 성이 있을거 같아 포스팅을 합니당~

jquery 를 이용 하였습니다~

$(document).ready(function (){
$(window).scroll(function (){
if($(window).scrollTop() == $(document).height() - $(window).height()){ //최하단의 위치값과 동일여부
lastPosted(); //스크롤페이징 ajax 호출 스크립트
}
});

lastPosted(); //스크롤페이징 ajax 호출 스크립트
});

위의 것은 안드로이드 에서 test해본 결과 이다. 잘된다~ 아이폰은 높이 갚이 좀 틀리더라구요. 맨하단의 툴바인지 주소창 문제 인지는 모르지만 alert 로 체크하여 높이값을 제설정 해주었습니다.

if($(window).scrollTop() == $(document).height() - $(window).height() - 60 ){ //최하단의 위치값과 동일여부
lastPosted(); //스크롤페이징 ajax 호출 스크립트
}

소스를 보시면 지금 현재 높이 값과 스크롤이 최상단의 값을 비교 하여 최하단의 위치 라면. scroll paging ajax 함수 스크립트를 호출 합니다~

저 같은 경우는 게시물의 마지막 인덱스 값을 가지고 판가름 합니다. 물론 없을 경우 DB SP 에서 해당 게시물의 MAX 값을 뽑아서 인덱스를 설정해주는 방식으로 합니다.


예제 소스를 올리겠습니다.

< !--페이징 호출 script-->

<script type="text/javascript">
var pstate = 0; //ajax 진행중값

function lastPostLoad(){

if(pstate == 0){ /*진행중이 아닐경우*/
$("#LodingImage").html('<img src="/images/loading.gif" style="margin:10px 0;" />');
pstate == 1; //진행중값으로 변경
var lastId = 0;
if($(".list li:last").attr("id")){ //id 값이 있을
// window.scrollTo(0, $(window).scrollTop() + 30);
if (navigator.userAgent.indexOf('iPhone') != -1)
{
setTimeout(scrollTo, 0, 0, $(window).scrollTop() + 30); //안드로이드 스크롤 아래이동
}else{
window.scrollTo(0, $(window).scrollTop() + 30); //아이폰 스크롤 아래이동.
}
lastId = $(".list li:last").attr("id");
}
/*ajax 호출*/
$.ajax({
type :"POST",
data : "lastIdx="+lastId+"&count=6+ "파리미터",
url : "페이지호출 url",
success: function (data){
if(data=="false"){
alert("데이터를 로드 하지 못하였습니다.");
$("#LodingImage").empty();
pstate = 0;
}else if(data == ""){
alert("더이상 목록이 존재 하지 않습니다.");
$("#LodingImage").empty();
pstate = 1;

}else{

if($(".list li:last").attr("id")){ //첫실행이 아닐경우 li존재

$(".list li:last").after(data);

}else{ //첫실행일 경우li 없음

$(".list").html(data);
}

$("#LodingImage").empty();
pstate = 0;
}
},
error: function (){
alert("파일 접속 오류 잠시후 이용해 주세요.");
$("#LodingImage").empty();
pstate = 0;
}
});
}
}
//window.onLoad = lastPostLoad;
</script>

<!--end-->

<ul class="list">
</ul>
</div>
<div id="LodingImage"></div>


제가 사용한 소스 입니다. 간단합니다 ul list 에서 li 를 넣어 줍니다. 위에서 설명한 것과 같이 최상단 index 값의 하위 데이터를 가져와서 넣어주는 방식입니다. 여기서 주의 하셔야 할것이..



if (navigator.userAgent.indexOf('iPhone') != -1)
{
setTimeout(scrollTo, 0, 0, $(window).scrollTop() + 30);
}else{
window.scrollTo(0, $(window).scrollTop() + 30);
}

이부분인데요 이부분은 스크롤을 움직이는 부분입니다. 보시다시피 안드로이드와 아이폰 스크롤 이동 이벤트를 분기 하였구요. 스크롤을 더 아래로 이동시켜 로딩 이미지 라든지 아래 리스팅이 된것을 확인 시켜 주기 위해 스크롤을 좀더 아래로 이동 시켜 주었습니다. 
Security number

click to select icon

  • Very Happy
  • Smile
  • Sad
  • Surprised
  • Shocked
  • Confused
  • Cool
  • Laughing
  • Mad
  • Razz
  • Embarassed
  • Crying or Very sad
  • Evil or Very Mad
  • Twisted Evil
  • Rolling Eyes
  • Wink
  • Exclamation
  • Question
  • Idea
  • Arrow
  • Sux
  • Good
  • Very Angry
  • Attention


목록수정삭제인쇄0


Board List
No.제목글쓴이조회등록일
실무에서 많이 쓰는 위주로 순서없이 그때 그때 포스트합니다.x-mind5132015.04.02
HTML5강좌 링크x-mind1,6002012.02.28
23네이버 웹마스터 도구로 사이트 검색엔진에 추가x-mind1652016.04.26
22[HTML5] 안드로이드 및 아이폰에서 input file 사용시 카메라 호...x-mind4042016.04.22
21유투브 동영상을 배경으로x-mind1892016.03.30
20Canvas - 파일로 저장x-mind3892015.09.08
19모바일웹 카카오링크 연동(단순텍스트 링크 보내기)x-mind8322015.06.11
18[링크]나의 웹사이트에 Facebook 계정으로 로그인 하기x-mind7502015.01.22
17[HTML5] 위치정보 사용하기x-mind9142014.10.27
16모바일 브라우저 테스트 도구x-mind1,1772014.03.20
15Safari 브라우저 모바일 모드x-mind1,3512014.03.20
14iScroll을 사용해서 모바일웹에서 내부 스크롤 영역 만들기x-mind1,6452013.03.27
13터치 이벤트를 이용한 사용자 제스처 분석x-mind2,6682013.03.26
12모바일 웹 스크롤 페이징x-mind6,9422013.03.26
11웹표준, 웹접근성을 고려한 HTML 코딩 작업시 규칙.x-mind3,0612013.01.24
10Google Chart Api 이용 QR 코드 생성x-mind1,2462013.01.24
9웹표준 코딩시 주의할점x-mind2,5442012.07.26
8tabindex 속성이 오히려 접근성을 해친다.x-mind2,0162012.04.11
7아이폰, 안드로이드 바탕화면에 바로가기 만들기 4x-mind8,6712012.03.27
6이전버전에서의 HTML5요소 사용x-mind9472012.03.02
5HTML5 API 강좌 #1 – Web Storage 와 Application Cachex-mind1,1772012.02.28
4화면 사이즈에 맞게 이미지 확대x-mind4,0222012.01.27
Copyrightⓒ x-mind.co.kr All rights reserved. 1