[오늘의 자바스크립트] 사이즈와 scroll

https://ko.javascript.info/article/size-and-scroll/metric-all.svg

 

모니터 해상도 너비(브라우저아님): window.screen.width

모니터 해상도 높이(브라우저아님): screen.height

모니터 화면의 작업표시줄 제외 너비(브라우저아님): screen.availWidth

모니터 화면의 작업표시줄 제외 높이(브라우저아님): screen.availHeight

브라우저 전체너비: outerWidth

브라우저 전체높이: outerHeight

스크롤바 포함 브라우저 내부너비(순수화면사이즈): window.innerWidth

스크롤바 포함 브라우저 내부높이: innerHeight

 

//.documentElement 문서전체

(new)스크롤바 영역 미포함 브라우저 내부너비: document.documentElement.clientWidth //뉴버전

(new)스크롤바 영역 미포함 브라우저 내부높이: document.documentElement.clientHeight //뉴버전

//webkit구버전

(old)스크롤바 영역 미포함 브라우저 내부너비: document.body.clientWidth //구버전

(old)스크롤바 영역 미포함 브라우저 내부높이: document.body.clientWidth //구버전

스크롤바로 숨겨진 영역까지 포함한 컨텐츠 너비: document.documentElement.scrollWidth //컨텐츠의 너비

스크롤바로 숨겨진 영역까지 포함한 컨텐츠 높이: document.documentElement.scrollHeight //컨텐츠의 높이

- window.scrollTo(pageX, pageY); 절대 좌표 스크롤 값

ex) scrollTo({top:ht, behavior:"smooth"}); //ht는 변수명ㅎㅎ

      scrollTo(0, ht); //ht는 변수명ㅎㅎ

 

- window.scrollBy(x,y); 현재 스크롤 상태를 기준으로 상대적 스크롤 정보 변경

scrollBy(0, 100);// 상대값으로 현재 위치에서 스크롤 이동 (setInterval하고 쓰면괜춘?)

 

- window.scrollIntoView(); 화면처음으로 해당요소가 스크롤로 이동

ex) boxs[2].scrollIntoView(false); //boxs는 변수명 ㅎㅎ 화면의 아래에 해당요소가 보임

 

- scrollTop, scrollLeft : 가로 세로 스크롤 되는 크기를 숫자로 반환

ㄴ낮은 버전의 브라우저 IC등을 고려할 때 >> document.body.scrollTop은 읽어짐

통상 아래와 같이 사용한다.

구버전 먼저 인식해보고 안되면 신버전 인식할수있도록 조건식

if(document.body.scrollTop || document.documentElement.scrollTop){...}

ㄴ요소.scrollTop은 ‘세로 스크롤바에 의해 가려져 보이지 않는’ 위쪽 콘텐츠의 높이

 

- scrollWidth, scrollHeight 는 clientWidth와 clientHeight 유사함,

   다만, content안에 스크롤바가 있는경우, 스크롤바에 의해 감춰진 영역도 포함함 

 

 

 

요소 element의 거리

 

offsetParent: position이 설정되어있는 조상요소기준. 없으면 body기준 반환

offsetTop: offsetParent부터 위에서 떨어져있는 거리

offsetleft: offsetParent부터 왼쪽부터 떨어져있는 거리

요소의 크기

 

offsetWidth: width + padding + border + scrollbar

offsetHeight: height + padding + border + scrollbar

clientWidth: width + padding

clientHeight: height + padding