window 크롬 scrollTop버그

scroll

서비스 중에 ppt 같은 기능을 웹으로 구현한 부분이 있다. 여기서는 현재 페이지가 scrollBottom인지 확인한 후에 맞으면 다음페이지로 넘겨주고 아니면 scroll을 더 한다.

그런데 특정환경(윈도우7 크롬)에서 불규칙적으로 다음페이지로 안넘어가는 버그가 있었다. isScrollBottom 의 값이 false이기 때문이다.

문제점

scrollBottom인지 확인하는 코드는 다음과 같다.
MDN홈페이지(mozilla)에 나와있는 코드와 같다.
스크롤포함한 전체 높이에서 스크롤 한 Top값 만큼 뺀 것이 현재 엘리먼트의 높이와 일치하는지 보는 것이다.

element.scrollHeight - element.scrollTop === element.clientHeight

혹시 모를 경우를 대비해 부등호까지 추가시켰다.

element.scrollHeight - element.scrollTop <= element.clientHeight

그런데도 false가 나는 이유는 scrollHeight, clientHeight의 값은 정수인데 scrollTop의 값이 소수이기 때문이다.
예를 들어 원래 나와야 하는 픽셀기반의 scrollTop값이 320이라면 320.333 일 땐 True, 315.777 일 땐 false가 나오게 된다.
그래서 소수점 상황에 따라 특정상황에서는 true, false가 나오는 것이다.

사실 scrollHeight, scrollTop, clientHeight의 값은 모두 integer여야 정상이다.

MDN 홈페이지나 모든 공식문서, scrollTop을 정의한 곳에도 integer로 나와 있다.

테스트 결과 chrome, firefox. safari 여타 브라우저도 마찬가지이다. 모두 정수이다. 윈7의 크롬만 소수이다.

chrome에서 scroll value를 계산할 때는 float값을 쓴다. 하지만 그래도 반환은 정수로 해야한다.

왜 이런 상황이 나오는지는 좀 더 확인을 해봐야겠지만
isScrollBottom을 짤 때는 scrollTop 값을 반올림하여 정수로 바꾸어 처리하도록 하자.

Comments

comments powered by Disqus
comments powered by Disqus