[getBoundingClientReact]웹 브라우저를 좌표로 실시간 반환

메서드는 엘리먼트(Element)의 크기와 뷰포트(Viewport)에 상대적인 위치 정보를 제공

다시  말해,

getBoundingClientRect() 의 요소의 위치는 고정값이 아니라 문서가 브라우저에서 스크롤 될 때 마다 값 전달.

 

console.log('offsetTop: ' + elem.offsetTop); //This is fixed. it get's calculated from beginning of your page to actual element's position.

console.log('getBoundingClientRect: ' + elem.getBoundingClientRect().top); // this will changing while scroll, because it's relative to your current view port.

 

 

참조 자료

https://usingu.co.kr/frontend/javascript/%EC%9A%94%EC%86%8C%EC%9D%98-%EC%9C%84%EC%B9%98-%EC%A0%95%EB%B3%B4-%ED%99%95%EC%9D%B8-getboundingclientrect-offsettop/

https://stackoverflow.com/questions/44172651/difference-between-getboundingclientrect-top-and-offsettop

https://developer.mozilla.org/ko/docs/Web/API/Element/getBoundingClientRect