calculate scroll position

Infinite 스크롤을 구현하거나 해야하는 경우, 현재 스크롤의 위치가 제일 아래인지를 체크해야한다. 해당 값을 계산하기 위해 구글링을 해보면 대부분 document.documentElement 요소를 사용하여 계산하는 가이드가 적혀있다.

const { scrollTop, clientHeight, scrollHeight } = document.documentElement;
return scrollTop + clientHeight >= scrollHeight;

하지만 크롬과 같은 브라우저만 사용해서 구현이 된다거나 한정지을 수 있다면 문제가 없겠지만.. 다양한 브라우저와 버전에서 동작을 해야한다거나 한다면..

해당 요소에서 전달되는 값이 브라우저 마다 같은 값을 반환하지 않는다라는 문제가 있다. 반환되는 값에 대해서는 표준화가 된 값이 아니기 때문이라고 한다.

Solution

예를 들어 모바일 웹뷰에서 테스트를 해보면...

scrollTop : IOS에서는 항상 0이 리턴. 하지만 document.body.scrollTop은 변경된 값을 반환한다.
scrollHeight : IOS에서 하단의 버튼이 존재하면 해당 높이만큼 빠져서 반환이 되지만 doby의 값을 기대한 값을 전달해준다.

이러한 차이로 인하여 아래와 같이 documentElement와 body에서 값을 꺼내서 비교한 후 큰 값을 가져와서 위치를 계산하도록 구현해볼 수 있다.

        scrollTop: Math.floor(Math.max(document.documentElement.scrollTop, document.body.scrollTop)),
        scrollHeight: Math.max(document.documentElement.scrollHeight, document.body.scrollHeight),
        clientHeight: document.documentElement.clientHeight,

하지만, 이것도 다양한 브라우저와 디바이스 환경에서 테스트해본 것은 아니므로 보완이 필요할 수도 있다.

gloriaJun / til

calculate scroll position #75

Solution

Reference