*** 인피니트 스크롤 시 ***
스크롤 값
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"); //로딩
}
}
}
|
'Web > Javascript' 카테고리의 다른 글
마우스 이벤트 연습하기 (0) | 2020.02.06 |
---|---|
Javascript 배열( 선언과 초기화 및 활용 ) 틈틈이 추가예정 (0) | 2020.02.05 |
자주 사용하는 배열 메소드 -map,forEach,reduce,filter (0) | 2020.01.16 |
자주 사용하는 배열 메소드 - join,indexOf,slice,concat (0) | 2020.01.16 |
자주 사용하는 배열(Array) - pop,shift, push, unshift,split,splice,fill (0) | 2020.01.16 |