본문 바로가기
개발/WEB

[저장용] 스크롤 최하단 감지 이벤트

by Strong_옹이 2022. 12. 19.
728x90
반응형

스크롤이 맨아래 내려왔는지 감지 하는 이벤트

스크롤이 맨아래 내려왔을때 웹의 경우는 페이징이 표시되고,

모바일인 경우 스크롤을 내려 아래 목록이 더 조회되도록 구현 

var tmpPage = "1";
$(".item-list.scroll-area").scroll(function() {
    var scrollTop = $(this).scrollTop();
    var innerHeight = $(this).innerHeight();
    if (isMobile()){
        if (scrollTop + innerHeight >= $(this)[0].scrollHeight) {
            tmpPage++;
            getList(tmpPage);
        }
    }
});
var tmpPage = "1";
$(".item-list.scroll-area").scroll(function() {
    // 현재 영역의 가장 위 
    var scrollTop = $(this).scrollTop();
    // 현재 보이는 영역의 높이(스크롤로 감춰진곳은 계산 X)
    var innerHeight = $(this).innerHeight();
    //  스크롤 포함 영역의 높이(스크롤로 감춰진곳 계산 O)
    var scrollHeight = $(this).prop('scrollHeight');

    if (isMobile()){
        // 스크롤 맨 아래 일때
        if (scrollTop + innerHeight >= scrollHeight) {
            tmpPage++;
            getList(tmpPage);
        }
    }
});
728x90
반응형

댓글