🚀 화면 스크롤 맨 아래 / 맨 위 감지하기

스크롤 맨 아래 맨 위 감지하기

스크롤 되어 내려온 위치와 브라우저에 표시된 높이를 더한 값이 페이지 전체 높이 값과 같거나 클 경우를 비교해 로직을 짜주면 된다.

 

맨 아래까지 왔다고 판단하는 로직

function detectBottom() {
    var scrollTop = $(window).scrollTop();
    var innerHeight = $(window).innerHeight();
    var scrollHeight = $('body').prop('scrollHeight');
    if (scrollTop + innerHeight >= scrollHeight) {
        return true;
    } else {
        return false;
    }
}

 

맨 위를 감지하는 방법

function detectTop() {
    var scrollTop = $(window).scrollTop();
    if (scrollTop == 0) {
        return true;
    } else {
        return false;
    }
}