Vuetify Infinity Scroll _ 무한 스크롤

Infinity Scroll _ 무한 스크롤

: 스크롤을 내려서 하단에 닿을 때마다 새로이 정보를 불러와 추가해주는 기능

 

구글링 찾은 코드 : codepen.io/mednabouli/pen/EdKzzL

 

코드도 간단해서 사용했는데 문제가 발생.

 

듀얼 모니터 사용 시, 주 모니터 화면을 기준으로 스크롤 위치를 잡아버림.

• 큰 모니터를 주로, 작은 모니터를 보조로 사용한 경우 같은 인터넷 창을 큰 모니터는 최하단을 1000으로 잡을 때, 작은 모니터는 999.xxx 식으로 잡히는 문제가 발생 (화면값+스크롤값을 더해도 전체 페이지 값을 넘지 못함)
• 간단하게 덧셈으로 값을 넣어줌
• 단순히 작은 편법으로 1만 넣어줘도 문제가 해결됐으나 휴대폰으로 화면을 열었을 경우 비슷한 문제 발생으로 값을 조금 더 크게 넣어주기로 함

 

위 코드에서

 

bottomVisible() {
      const scrollY = window.scrollY
      const visible = document.documentElement.clientHeight
      const pageHeight = document.documentElement.scrollHeight
      const bottomOfPage = ( visible + scrollY + 100 )>= pageHeight
      return bottomOfPage || pageHeight < visible
    },

 

ㅡ으로 간단 해결!!

 

더 좋은 방법이 있기를 바라며...