SpringBoot + MariaDB 7-3 스토리 스크롤 페이징

우선 스크롤 페이징을 하기전 스크립트 스크롤함수들을 알아보자

$(window).scroll(() => {
	console.log("윈도우 scoroll",$(window).scrollTop());
	console.log("문서의 높이",$(document).height());
	console.log("윈도우 높이",$(window).height());
});

scroll 은 아래로 내릴수록 더커지고 

문서의 높이는 홈페이지 전체 크기이다 (사진이 추가될수록 더 커진다)

윈도우 높이는 지금 사진에 보이는 화면 크기이다 (즉 모니터가 클수록 더 커진다)

그렇담 스크롤 하면서 불러오는 건 어떻게 가져올까

문서의 높이 - 윈도우의 높이가 == scrollTop(스크롤위치) 일때 불러오면 된다.

 

그렇담 코드를 밑과 같이 작성하고 스크롤을 맨 아래로 한다면 값이 어떻게 되겠는가?

$(window).scroll(() => {
	
	let checkNum = $(window).scrollTop() -($(document).height() - $(window).height());
	
	console.log(checkNum)
});

스크롤을 맨 아래로 하니 0값이 오는걸 확인할 수 있다

 

자이제 언제 이미지를 불러올지 알았으니 적용 시키러 가보자

story.js

let page  = 0; // 페이지 판별을 위해 처음엔 0부터 시작하니 0으로설정

function storyLoad() {

	$.ajax({ // 이미지뒤에 쿼리스트링으로 page입력해줌
		url : `/api/image?page=${page}`,
		dataType : "json"
	}).done(res=>{
		console.log(res);
		res.data.content.forEach((image)=>{
			let stoyItem = getStoryItem(image);
			$("#storyList").append(stoyItem);
		})
	}).fail(err=>{
		console.log("오류",err)
	})

}

$(window).scroll(() => {
	// 페이지 전체의 높이에 현재보이는 화면 높이를 빼서 스크롤위치에 -를 하게된다.
	let checkNum = $(window).scrollTop() -($(document).height() - $(window).height());
	
	console.log(checkNum)
	위 연산이 진행되고 값이 1보다작거나 -1보다 크면 함수 실행
	if(checkNum < 1 && checkNum > -1){
		page++; // 다음페이지 불러오기 위함
		storyLoad(); 
	}
});

 

스크롤 페이징이 완료되었고 스토리에 대한 글도 끝!

게시물 댓글이나 좋아요는 나중에 구현을 할려한다