본문 바로가기
개발/자바스크립트 및 프론트

자바스크립트) 무한스크롤 - 스크롤 최하단 Check

by kakk789 2022. 8. 29.
생각보다 간단하다.
window의 창 크기를 비교하는 함수와 속성을 이용하여 스크롤의 맨 아래 일 경우에 
해당 div에 데이터를 append 시키면 된다.
  • 근데 내 경우는 좀 이상한 값이 도출 되었다. 
  • outerHeight 값보다 innerHeight 값이 더 큰 값이 도출된다. 이론상 outerHeight는 브라우저 전체 height값이라 더 크게 나와야하는데....
  • 일단 도움이 될 수도 있으니 참고용으로만 적어두겠습니다.
if (window.outerHeight + $(window).scrollTop() -100 > $(document).height()) {
            ...
            ...
            ...
	//$.ajax 통신으로 동적 생성!
}
  • -100을 해준 이유는 얼추 맨 하단 쯤 갔을 때 다시 뿌려주기 위해 작성하였음.
  • window.outerHeight부분을 innerHeight로 해야할 것 같은데 실제 값을 찍어보면 
  • outerHeight가 더 작은 값이 나온다... 그래서 일단 outerHeight를 이용하여 코딩을 하였다. (원인은 모르겠음)

Mapper

select * from
    (
        SELECT ROWNUM AS RNUM, A.* FROM
            (select board_id, board_title, board_content, board_reg_date, board_up_date, board_url, mem_id, hit, thumbnail
             from board
             order by board_reg_date desc) A

<![CDATA[
where ROWNUM <= #{endPage}
    )
where RNUM >= #{startPage}
]]>
반응형

댓글