페이지 스크롤

https://happy-fun.tistory.com/132

페이징 처리

이 글은 웹사이트상에 페이징 처리(한 페이지에 나타낼 수 있는 이미지 수 제한)

한 후 스크롤 바를 이용해서

페이지 이동처리를 하는 방법이다.

따라서 위의 페이징 처리 글을 읽고 와도 된다.

 

 

<js 파일>

$(window).scroll(() => {
	
});

다음과 같이 입력 시 웹 사이트 상에 스크롤 바가 생긴다.

그래서 한 페이지에서 스크롤 처리가 가능하다.

 

아래처럼, scrollTop, height 를 console.log를 통해 웹사이트 상의 f12 console 창에 출력해보겠다.

<js 파일>

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

 

 

 

웹 사이트의 스크롤바를 위에서 아래로 내리게 되면

위 그림의 결과가 나온다.

윈도우 scrollTop은 점점 늘어나고,

문서의 높이, 윈도우의 높이는 그대로이다.

 

윈도우 scrollTop :  $(window).scrollTop()

-> 스크롤의 위치에 따라 변하는 값

맨 위(0), 맨 아래(스크롤 길이 max값)

 

문서의 높이 : $(document).height()

-> 웹사이트 한 페이지 전체 문서의 높이를 의미한다.(스크롤 맨 위부터 맨 아래까지 이동하는 문서 전체의 높이)

 

윈도우 높이 : $(window).height()

-> 컴퓨터 화면상에 보이는 높이

즉, 인터넷 창 오른쪽 위

 

 

 

 

아이콘에서 가운데 네모버튼, 즉 최대화, 최소화 버튼을 누르면 사이트 화면의 크기가 변하게 되는데, 

이 때 최소화 버튼을 눌러서 사이트화면이 줄어들면 윈도우 높이도 줄어든다. 

(하지만, 문서의 높이는 고정되어 있는 값으로, 변하지 않는다.)

 

--------------------------------------

 

이 결과, 윈도우의 높이보다, 문서의 높이가 높다면, 스크롤이 생긴다는 것을 알 수 있다.

그림 출처 : https://joo-dev.tistory.com/3

 

그래서,

스크롤을 맨 아래로 내렸을 때 스크롤 길이 값 = 문서의 높이 - 윈도우 높이 

식을 얻어 낼 수 있고, 

 

이렇게 스크롤이 맨 아래로 내려갔을 때, 다음 페이지가 이이서 load 되게 하면 된다.

 

 

즉 현재 화면에서 이미지 3개를 보여주는데, 스크롤이 맨 아래까지 내려가면,

다음 페이지의 이미지 3개가 load되서 보여지도록 하는 것이다.

 

(즉, 1페이지의 스크롤을 맨 아래로 내렸을 때, 2 페이지의 맨 윗부분이 화면에 또 나타나면서, 스크롤은 위로 올라감. 즉 다시시작)

 

 

<js 파일>

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

이렇게, 스크롤을 맨 아래로 내렸을 때 스크롤 길이 값 = 문서의 높이 - 윈도우 높이 

이 식을 적용해서

checkNum 을 정해주고, 실행하면 

맨 위에서 아래로 스크롤을 내리면 위 그림처럼

...-> -247 -> -248-> ... -> 0 이 된다.

이 때 다음 페이지를 load하도록 해주면 된다. 

 

<js 파일>

$(window).scroll(() => {
	
	let checkNum = $(window).scrollTop() - ( $(document).height() - $(window).height() );
	console.log(checkNum);
	
	if(checkNum < 1 && checkNum > -1){
		page++;
		storyLoad();
	}
	
});

storyLoad() 함수는 이미지를 repository로부터 얻어와서 화면에 뿌려줌

page 변수는 storyLoad()메서드에서 활용됨

 

 

참고 자료1 : https://joo-dev.tistory.com/3

[JavaScript] 스크롤 맨 아래점 도달 시 글 불러오기

참고자료 2 : 이지업 강의 사이트 "스프링부트 SNS프로젝트 - 포토그램 만들기"