WebAPIs(브라우저 좌표)

• 브라우저 좌표에 있어 중요한 API인 Element.getBoundingClientRect()를 기억하자
• Element.getBoundingClientRect: Width와 Height, 요소의 너비와 높이가 얼마인지 그리고 top과 left의 표지션에 대해서도 얻어올 수 있습니다.

 

※주의 CSS에서의 absolute를 이용해 right와 bottom을 줄때와 다르다는 것을 생각하자

absolute rigth을 주게되면 브라우저에서 제일 오른쪽부터 떨어져 있는 거리를 계산한다.

 

Client x, y vs Page x, y

• 사용자가 조금 스크롤링한 상태에서 click 을하게 되면 Client X,Y와 Page X,Y의 값이 달라집니다.Page x,y는 페이지 자체에서 문서 자체에서 떨어져 있는 X와 Y를 의미합니다.
• client x,y는 브라우저 wiwndow창에서 X와 Y가 얼마나 떨어져 있는지 확인할 수 있습니다.

  

scrollTo, scrollBy로 스크롤 상태 변경하기

mine

window.scrollTo( X, Y ) 는 **왼쪽 상단을 기준(절대위치)**으로 하여 스크롤을 이동시키며,

window.scrollBy( X, Y ) 는 **현재 위치를 기준(상대위치)**으로 하여 스크롤을 이동시켜준다는 차이가 있습니다.