programming/Javascript
인피니트 스크롤 구현 공식
amazingDavi
2020. 1. 28. 14:33
*** 인피니트 스크롤 시 ***
스크롤 값
document.documentElement.scrollHeight = 스크롤의 전체 높이(스크롤 쭉 내려셔 있는 하단까지의 높이)
document.documentElement.clientHeight = 현재 보고있는 화면 높이(화면에 잡히는 높이)
window.scrollY = Y축 스크롤 이동 값 (내가 스크롤 얼마나 내렸는지)
즉,
document.documentElement.scrollHeight - 게시물 로드할 지점의 스크롤 값 <
document.documentElement.clientHeight + window.scrollY 이면 게시물 로드 요청.
1
2
3
4
5
6
7
8
9
10
|
onScroll() {
if (//스크롤 위치가 밑에서 300 지점까지 왔을 때
document.documentElement.scrollHeight - 300 <
document.documentElement.clientHeight + window.scrollY
) {
if (this.hasoMorePost) { //가져올 게시물이 더 있으면
this.$store.dispatch("posts/loadPosts"); //로딩
}
}
}
|