브라우저에서 끝까지 스크롤 했다는 것을 확인하기

div 내부에서 끝을 체크한 것과 로직은 비슷하지만 로직을 실행할 대상이 다르다.

 

div 내부에서는 div를 대상으로 scrollTop, scrollHeight, clientHeight를 구해서 연산을 했지만 브라우저에서는 html 태그를 대상으로 scrollTop, scrollHeight, clientHeight를 구해서 연산을 해야한다.

 

// div(.lorem) 대상

var scrollAmount = document.querySelector('.lorem').scrollTop;
var scrollRealHeight = document.querySelector('.lorem').scrollHeight;
var divHeight = document.querySelector('.lorem').clientHeight;

// 브라우저 (html) 대상

var scrollAmount = document.querySelector('html').scrollTop;
// 브라우저에서 scrollAmount는 window.scrollY와 같다.
var scrollRealHeight = document.querySelector('html').scrollHeight;
var divHeight = document.querySelector('html').clientHeight;

 

 

html태그를 대상으로 무언가를 체크할 경우
웹페이지가 모두 로드가 되었을 경우에 정확히 체크가 가능하다.
따라서 body 태그 제일 하단에서 체크하는 것이 가장 좋다.

 

window.addEventListener('scroll', function(){
    var scrollAmount = document.querySelector('html').scrollTop;
    var scrollRealHeight = document.querySelector('html').scrollHeight;
    var divHeight = document.querySelector('html').clientHeight;

    if (scrollAmount + divHeight == scrollRealHeight) {
        alert('웹페이지를 끝까지 스크롤 하셨습니다.')
    }
})