window.scrollY?

.

 

네이버 페이지를 예로 들겠습니다. window.scrollY 는 빨간줄이 그어진 부분을 기준으로 페이지 전체 스크롤중에 어디에 위치하는지 숫자로 나타내주는 객체 입니다

 

 

조금 아래로 스크롤을 내리고 다시 객체를 호출 해보면 현재의 위치가 0에서 900으로 변한 것을 알 수 있습니다.

 

 

다음으로 알아볼 객체는 window.document.documentElement.clientHeight 입니다.

 

이미지의를 보면 위의 빨간줄(브라우저 최상단)과 아래의 빨간줄(브라우저 최하단) 사이의 총 거리가 window.document.documentElement.clientHeight 입니다. F12 개발자 모드에서 객체를 호출해 보면 919라는 값이 나오는데요 이 값은 페이지 스크롤 어느 부분에서 호출해도 919 고정값입니다. (각자의 화면 해상도 환경등에 따라 값은 다르게 나옵니다. 919는 제 해상도 기준!)

 

 

마지막으로 알아볼 객체는 window.document.documentElement.scrollHeight 입니다.

 

 

위의 이미지의 빨간줄은 브라우저 스크롤 최상단이고 아래이미지의 빨간줄은 브라우저 스크롤 최하단을 나타내고 있습니다. 이 두 줄 사이의 총 거리가 window.document.documentElement.scrollHeight 입니다. 이것도 마찬가지로 고정값으로 스크롤 어느 부분에서 출력하던 고정값입니다. (해상도에 따라 값은 다를 수 있습니다.)

 

이것을 이용하면 예를들어 window.scrollY + document.documentElement.clientHeight 의 값이

document.documentElement.scrollHeight와 같다면 현재 스크롤의 최하단이 전체 스크롤의 최하단에 왔다는 뜻이 되겠지요?(스크롤을 끝까지 내렸다는 이야기)

이것을 이용해서 스크롤이 일정 지점 이상 지났을때 어떠한 이벤트를 호출한다던지 이런식으로 응용이 가능합니다.

 

 

react-vertualized 는 브라우저 스크롤을 최적화 시키는데 도움이 될 만한 모듈 입니다.

이미지가 많은 페이지에서 한번에 많은 양을 스크롤 하면 끊김현상이 심한데 react-vertualized는 화면에 보일 이미지만 렌더링 하고 나머지는 메모리에 저장해 뒀다가 스크롤을 아래로 내릴때 위로 지나간 부분은 삭제하고 아래쪽을 생성해서 인피니트 스크롤을 하는 방식 입니다. 아래 링크를 참고하세요~

https://www.npmjs.com/package/react-virtualized

react-virtualized