스토리 페이지
스크롤로 당기면 3건을 더 로드할수있게 수정해본다
story.js에 스토리 스크롤 페이징하기로 써져있는 주석으로 가서
// (2) 스토리 스크롤 페이징하기
$(window).scroll(() => {
console.log("스크롤 중")
});
JavaScript
복사
스크롤 내리면 엪에 스크롤 카운트가 된다
// (2) 스토리 스크롤 페이징하기
$(window).scroll(() => {
console.log("윈도우 scrollTop", $(window).scrollTop());
console.log("윈도우 높이", $(window).height());
console.log("문서의 높이", $(document).height());
});
JavaScript
복사
윈도우 높이는 브라우저 크기를 말한다. 브라우저를 줄이면 같이 윈도우 높이가 줄어든다.
문서의 높이 - 윈도우 높이 = 윈도우 scrollTop
2670 - 839 = 1831
컴퓨터 모니터마다 윈도우 높이가 다르기 때문에 이 공식을 이용한다.
// (2) 스토리 스크롤 페이징하기
$(window).scroll(() => {
//console.log("윈도우 scrollTop", $(window).scrollTop());
//console.log("윈도우 높이", $(window).height());
//console.log("문서의 높이", $(document).height());
let checkNum = $(window).scrollTop() - ( $(document).height() - $(window).height() );
console.log('윈도우 scrollTop - (문서의 높이 - 윈도우 높이)', checkNum);
});
JavaScript
복사
넉넉하게 잡아준다
if(checkNum < 1 && checkNum >-1){
storyLoad();
}
JavaScript
복사
이렇게 추가하게 되면 storyLoad 함수를 호출하면서 같은 페이지를 또 보여주게 된다
page = 0 으로 선언하면서
스크롤 페이징에 page++ 추가해준다
// (2) 스토리 스크롤 페이징하기
$(window).scroll(() => {
//console.log("윈도우 scrollTop", $(window).scrollTop());
//console.log("윈도우 높이", $(window).height());
//console.log("문서의 높이", $(document).height());
let checkNum = $(window).scrollTop() - ( $(document).height() - $(window).height() );
console.log('윈도우 scrollTop - (문서의 높이 - 윈도우 높이)', checkNum);
if(checkNum < 1 && checkNum >-1){
page++;
storyLoad();
}
});
JavaScript
복사
스크롤 내릴때마다 3건씩 새로 갖고와진다.