Javascript

[12/08] 문서의 기하학적 특성, 뷰포트, 스크롤 제어, 스크린의 크기

weicome 2017. 12. 8. 09:24
[출처] 생활코딩 http://opentutorials.org/course/1 

엘리먼트의 위치와 크기


getBoundingClientRect() : ClientRect 객체를 반환
top - 문서의 최상단으로부터 거리
left - 문서의 시작점에서 객체가 시작되는 왼쪽 지점까지 거리
height - 객체의 높이
width - 객체의 폭
right - 문서의 시작점에서 객체가 끝나는 오른쪽지점까지

offsetParent() : Element의 top, left 측정기준을 확인
-CSS position 값이 static인 table 과 같은 엘리먼트가 부모인경우 offsetParent는 부모 객체가 된다.



        뷰포트

        setInterval(function(){}, time);
        -function을 time 간격으로 반복적으로 실행

          window.pageYOffset : 웹페이지 세로 스크롤을 움직인 거리(px 단위)
          -getBoundingClientRect.top : 세로 스크롤 움직이는 만큼 늘어나거나 줄어듦. 뷰포트를 기준으로 스크롤한만큼
          -viewport의 좌표 

          window.pageXOffset : 웹페이지 가로 스크롤을 움직인 거리(px 단위)
          -getBoundingClientRect.left : 가로 스크롤 움직이는 만큼 늘어나거나 줄어듦. 뷰포트를 기준으로 스크롤한만큼
          -viewport의 좌표


          스크롤제어

          window.scrollTo(x, y);
          x : 가로 스크롤
          y : 세로 스크롤


          스크린의 크기

          window.innerWidth - 뷰포트 가로 크기 
          window.innerHeight - 뷰포트 세로 크기 

          screen.width - 사용자 모니터 가로 크기
          screen.height - 사용자 모니터 세로 크기