JavaScript (3) - Window Size, Window.scrollTo, Window.scrollBy, Window Load 설명

Global Object

ex) innerWidth ← Window 안의 innerWidth 를 가져온다.

 

DOM - Document Object Model

BOM - Browsers Object Model

JavaScript

Window Size

• window.screen
  • 모니터 사이즈 - 브라우저 사이즈가 변경되어도 사이즈를 유지한다.

• window.outer
  • 브라우저에 있는 url 상단,탭까지의 사이즈

• window.inner
  • 웹페이지(스크롤바 포함)

• documentElement.clientWidth
  • 웹페이지(스크롤바 제외)
  • page x,y (문서의 시작점)
  • client x,y (브라우저 시작점)

 

Window Coordinates

scroll_to.addEventListener('click', event => {
   window.scrollTo(0, 100); 
//페이지 기준으로 100px
});
scroll_by.addEventListener('click', event => {
   window.scrollBy({ top: 100, left: 0, behavior: 'smooth' }); 
//브라우저 기준으로 100px
});
special.addEventListener('click', event => {
 window.scrollBy(0, special_box.scrollIntoView());
//해당 element 위치로 이동
});

 

Window Load

//차이점 only document (html)
  window.addEventListener('DOMContentLoaded', () => {
	  console.log('DOMContentLoaded ');
  });
// after resources (css, images) 모든 리소스 다운로드 
  window.addEventListener('load', () => {
    console.log('load');
  });

//before unloaded
  window.addEventListener('beforeunload', () => {
    console.log('beforeunload');
  });

//resource is being unloaded
  window.addEventListener('unload', () => {
    console.log('unload');
  });