자바스크립트 스크롤 맨 위/아래 감지하기

사용자가 웹 페이지를 다 읽었는 지 판단하여 다른 액션을 이어가고자 할 때 또는 꼭 읽어야 하는 글이 있을 경우 글의 맨 아래에서 버튼 상태를 활성화 시킬 때도 유용할 수 있습니다.

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;
    }
}

스크롤 된 위치가 0인지만 보면 바로 판단이 됩니다.

 

이 로직을 응용하면 본문의 위치를 나타내는 프로그레스바를 만들 수도 있어 보입니다.

 

 

티스토리 스크롤 시 글 위치 표시 프로그레스바 만들기

티스토리 스크롤 시 글 위치 표시 프로그레스바 만들기