[그누보드5/그누보드스킨] 무한스크롤 가능한 게시판 스킨

스크롤을 통해서 다음글을 불러오고, 혹은 이전글을 불러오는 스킨입니다. 

작업하면서 고민한 점은 페이징 처리입니다. 게시글을 들어가고, 글을 확인 한 다음 다시 목록으로 돌아왔을 때 

어떻게 보여줄 것인가를 고민하다 마우스 스크롤을 올리면 이전글을 불러오는 형태의 스킨을 구현해보았습니다. 

스크롤 부분은 이렇습니다. 
 

	$(window).scroll(function(){
		
		// 최하단일 경우를 체크하기 위해 최하단 위치값을 지정
		// 화면 문서전체의 길이에서, 현재 창 높이를 뺀 것이 최하단 값
		var chkBtm = parseInt($(document).height()) - parseInt($(window).height());
		
		if(chkBtm == $(window).scrollTop()){		
			// 최하단으로 도달했을 경우
			console.log('바닥입니다!');
		}else if($(window).scrollTop() == 0){
			// 최상단으로 도달했을 경우
			console.log('꼭대기입니다!');
		}
	});

그럼 이제 페이지값으로 게시물을 불러옵니다. 

	function callContent(a,b){
		// a = 페이지값
		// b = 이전글을 불러올지, 다음글을 불러올지 체크
		
		// 그누보드 list.skin.php 파일일 경우의 URL 
		var url = "/board.php?bo_table=&page="+a;
		var tbody = "";
		var thtml = "";

		$.ajax({
			type:"POST",
			url:url,
			dataType : "html",
			success: function(html){
				
				// 그누보드의 경우 리스트가 tbody안에 있기 때문에 이렇게 구분해서, 내용만 가져옴
				// 정규식으로 처리할 수 도 있지만, 귀찮아서,,
				tbody = html.split('');
				thtml = tbody[1].split('');

				// 목록을 너무 바로 불러오기 때문에 1초의 여유를 둠
				setTimeout(function() { 

					if(b=='append'){
						// append : 리스트 밑으로 붙임
						$(".tbl_head01").find('tbody').append(thtml[0]);
					}else{
						// prepend : 리스트 위로 붙임
						$(".tbl_head01").find('tbody').prepend(thtml[0]);
					}
					
				}, 1000);
			},
			error: function(xhr, status, error) {
				alert(error);
			}  
		});
	}

[예시화면 - 다음글 불러오기]





[예시화면 - 이전글 불러오기]





[스킨다운로드]

 

무한스크롤 게시판 스킨 > SIR

스크롤로 게시글을 불러오는 게시판 스킨입니다.    https://sir.kr/g5_skin/20427   Group By EYE님의 게시물을 조금 참고해서 만들 스킨입니다.    스크롤로 게시물을 불러오는 방식은 많이 있지만 제가 선택한 것은  ajax로 게시판을 호출해서 그 게시판의 목록만 가져와서 현 게시판에 붙이는 형태입니다.    Group By EYE님과 조금 다른 점은 게시물을 클릭하고 들어갔…

https://sir.kr/g5_skin/27677

 

[테스트페이지]
 

web.paper | 더보기스크롤 1 페이지 | 그누보드5

더보기스크롤 1 페이지 | 그누보드5

http://webpaper.kr/youngcart/bbs/board.php?bo_table=auto_scroll