본문 바로가기

Web/Javascript

인피니트 스크롤 구현 공식

***  인피니트 스크롤 시  *** 

스크롤 값

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"); //로딩
        }
      }
    }