자바스크립트 문서

 

스타일과 클래스

.className 을 사용하면 class="name age"의 name, age가 문자열 전체가 모두 불러와진다.

.classList를 사용하면 ex).classList.add('who')을 넣으면 'who'만 별개로 추가할 수 있다.

 

- elem.classList.add/remove("class") – class를 추가하거나 제거

- elem.classList.toggle("class") – class가 존재할 경우 class를 제거하고, 그렇지 않은 경우엔 추가

- elem.classList.contains("class") – class 존재 여부에 따라 true/false를 반환

 

offsetWidth / offsetHeight

border, padding 등이 모두 합해진 너비와 높이

 

clientWidth / clientHeight

border를 제외하고 패딩은 포함된 컨텐츠 너비와 높이

 

scrollWidth / scrollHeight

clientWidth 과 비슷한데 스크롤에 가려진 모든 컨텐츠 너비와 높이까지 포함

---

 

브라우저 창 사이즈와 스크롤

document.documentElement.clientHeight

-> clientHeight는 스크롤바가 차지하는 공간을 제외해서 너비나 높이 값을 계산한다. (패딩은 포함된다.)

(innerWidth, innerHeight은 스크롤바가 차지하는 영역을 포함해서 값을 계산한다.)

alert( window.innerWidth ); // 전체 창 너비
alert( document.documentElement.clientWidth ); // 스크롤바가 차지하는 영역을 제외한 창 너비

 

스크롤 정보 얻기

alert('세로 스크롤에 의해 가려진 위쪽 영역 높이: ' + window.pageYOffset);
alert('가로 스크롤에 의해 가려진 왼쪽 영역 너비: ' + window.pageXOffset);

-> 이 두 프로퍼티는 읽기만 가능하다.

 

스크롤 상태 변경하기

window.scrollBy(x,y) 또는 window.scrollTo(pageX, pageY)

- scrollBy는 현재 페이지, 위치를 기준으로 상대적으로 조정된다. scrollBy(0, 10) 을 사용하면 현재 기준으로 10px아래로 내려간다.

- scrollTo은 전체 페이지를 기준으로 조정되며 scrollTo(0,0)를 사용하면 현재 페이지의 가장 top으로 이동하게된다.

 

흥미로운 scroll 메서드

- scrollIntoView는 scrollIntoView() 클릭 시 버튼 기준으로 화면이 위로 달라붙고, scrollIntoView(false) 클릭 시 버튼 기준으로 화면이 아래로 달라붙는다. 신기하다.

 

스크롤 막기

- document.body.style.overflow = 'hidden' 페이지 스크롤을 할 수 없게끔 고정됨

- document.body.style.overflow = '' 다시 스크롤 사용이 가능해짐

 

✅ 이렇게 페이지 전체의 스크롤 상태가 갑자기 변경되면 사용자 입장에선 이상해 보일 수 있기 때문에 개발자는 스크롤바를 고정시키기 전과 후의 clientWidth값을 비교해서 해당 증상을 보정해야 합니다. 스크롤바가 사라질 땐 clientWidth값이 커지는데 이때 스크롤바가 차지했던 영역만큼 document.body에 padding을 줘서 콘텐츠 전체의 너비를 스크롤바가 사라지기 전과 같은 값으로 유지할 수 있습니다.