개발 Q&A

제목 모바일웹에서의 무한 페이지네이션
카테고리 JavaScript
글쓴이 주말생각 작성시각 2022/04/14 11:55:06
댓글 : 2 추천 : 0 스크랩 : 0 조회수 : 4221   RSS

안녕하세요. 무한 스크롤 페이지네이션을 아래와 같은 코드로 구현을 하였고 PC 환경에서는 잘 작동됩니다.

 

$(window).scroll(function(){
  let scrollTop = $(window).scrollTop(); // 현재 브라우저 스크롤의 위치값
  let docHeight = $(document).height(); // 현재 보고 있는 문서의 높이값
  let winHeight = $(window).height(); //  브라우저의 높이값
 
  if( (scrollTop + winHeight == docHeight) )
  {
              비동기로 다음 컨텐츠를 불러오는 내용()
  }
                 
});

 

그러나 모바일웹에서는 상단 url바 때문에 스크롤 되면 상단 url바가 사라져서 높이 계산이 제대로 되지 않아서 페이지네이션이 동작하지 않습니다.

 구글링에서는 css요소 수정으로 컨텐츠 내용을 수정하는 것으로 해결을 많이 제시하는데, 저의 경우에는 vh가 아니라 %라서 해당 내용이 맞지가 않더라고요.

좋은 방법이 있을까요?

 다음글 Error: CCI, -20016, Cannot con... (4)
 이전글 ci3 에서 mysql8.0 에러입니다 (1)

댓글

변종원(웅파) / 2022/04/19 15:49:48 / 추천 0
제가 쓴 책에 무한스크롤 구현한 소스가 있는데 한빛미디어 사이트에서 받으실 수 있습니다. 참고해보세요.
주말생각 / 2022/04/20 09:23:56 / 추천 0
감사합니다.