JS 높이와 스크롤

자바스크립트에서 좌표와 사이즈를 다룰 때 정말 해깔리는 경우가 많다.

또 개발중에 사이즈를 사용하는일이 그렇게 흔한일도 아니기 때문에 더욱이 쓸때마다 기억이 가물가물하다.

확실하게 정의해놔야 해깔리지 않을 거같아서 정리해본다.

 

좌표 : client vs page

우선 좌표(coordinates)는 3 가지가 있다.

client와 page. screen 이다.

client는 실제로 보이는 view 상에서의 위치를 나타낸 값이고

page는 보이지 않는 영역도 감안한 실제 요소 상에서의 위치이다.

page라는 키워드로 직관적으로 기억하면 될 것 같다.

screen 은 모니터 기준이다.

blue.addEventListener("click", (e) => {
  console.log(e.clientX, e.clientY); // 현재 view 기준
  console.log(e.pageX, e.pageY); // element 실제 사이즈 기준
});

이 값들은 클릭 이벤트에서 얻을 수 있다.

 

스크롤 APIs

브라우저에서 화면을 좌표로 이동시키는 것은 scroll이다.

특정 좌표로 이동시킨다 = 스크롤을 한다.

 

3가지 방법이 있는데,

1. 특정 단위로 스크롤

2. 특정 좌표로 스크롤

3. 특정 요소로 스크롤

// by 만큼 이동
window.scrollBy({
          top: 100,
          left: 0,
          behavior: "smooth",
        });
        
// to 로 이동
 window.scrollTo({
          top: 100,
          left: 0,
          behavior: "smooth",
        });
        
// 요소로 이동
 blue.scrollIntoView({
          behavior: "smooth",
});

 

 

Element의 총 스크롤 길이얻기

document.querySelector('body').offsetHeight // 4095

document.querySelector('body').scrollHeight // 4095

document.querySelector('body').offsetHeight // 4095

3가지는 미세한 차이가있다.

우선 공통적으로 모두 마진은 제외한다.

scrollHeight는 padding, border 포함한 길이

clientHeight는 padding 만 포함한 길이

offsetHeight는 padding, border, scrollBar 를 모두 포함한 길이이다.

 

getBoundingClientRect

여기서 주의할 점은 bottom과 right 가 css의 속성과 다르다는 점에서 헤깔리지 말아야한다.

이 메서드의 좌표 기준은 반드시 0,0 이 기준이다.