모던 JavaScript 튜토리얼 파트 2. 브라우저: 문서, 이벤트, 인터페이스를 읽고 정리, 기록
브라우저 환경과 다양한 명세서
ko.javascript.info
브라우저 창이 차지하는 너비와 높이?
스크롤 때문에 보이지 않는 영역을 포함하여 문서 전체가 차지하는 너비와 높이?
document.documentElement
<html> 태그와 상응하는 요소로 다양한 메서드를 지원한다.
브라우저 창의 너비와 높이
document.documentElement 의 clientWidth 와 clientHeight
window 객체가 아닌 document.documentElement 를 쓰는 이유
window 객체 역시 innerWidth와 innerHeight 프로퍼티를 지원한다.
스크롤바가 생기면 스크롤바 역시 공간을 차지하는데, clientWidth 나 clientHeight 는 스크롤바가 차지하는 공간을 제외해서 너비나 높이 값을 계산한다. 콘텐츠가 실제로 들어가게 될 영역의 너비와 높이 값을 반환한다.
하지만 window.innerWidth/innerHeight 는 스크롤바가 차지하는 영역을 포함해 계산한다.
창 사이즈가 필요한 경우는 스크롤 바 안쪽에 무언가를 그리거나 위치시킬 때가 대다수이기 때문에 documentElement의 clientHeight/clientWidth를 쓴다.
alert( window.innerWidth ); // 전체 창 너비
alert( document.documentElement.clientWidth ); // 스크롤바가 차지하는 영역을 제외한 창 너비
DOCTYPE 을 꼭 쓴다.
기하 관련 프로퍼티는 HTML 문서에 <!DOCTYPE HTML> 이 명시되어있지 않으면 이상하게 동작할 때가 있다.
문서의 너비와 높이
이론상 document.documentElement는 문서의 루트 요소에 상응하고, 루트 요소엔 콘텐츠 전부가 들어가기 때문에 문서의 전체 크기를 document.documentElement의 scrollWidth와 scrollHeight를 사용해 재면 되지 않냐?
그런데 전체 페이지를 대상으로 했을 때, document.documentElement의 프로피터들은 예상한 대로 동작하지 않는다.
- Chrome이나 Safari, Opera에서 스크롤이 없는 경우 documentElement.scrollHeight는 documentElement.clientHeight보다 작을 때가 있다.
→ 정확한 문서 전체 높이 값을 얻으려면 아래 여섯 프로퍼티가 반환하는 값 중 최댓값을 골라야 한다.
let scrollHeight = Math.max(
document.body.scrollHeight, document.documentElement.scrollHeight,
document.body.offsetHeight, document.documentElement.offsetHeight,
document.body.clientHeight, document.documentElement.clientHeight
);
alert('스크롤에 의해 가려진 분을 포함한 전체 문서 높이: ' + scrollHeight);
왜 이러냐 한다면 알아보지 않는게 낫다고 한다..
스크롤 정보 얻기
DOM 요소의 현재 스크롤 상태(스크롤에 의해 가려진 영역에 대한 정보)는 scrollLeft와 scrollTop 프로퍼티를 통해 구할 수 있다.
대부분의 브라우저에서 문서의 스크롤 상태는 document.documentElement의 scrollLeft나 scrollTop을 이용해 구할 수 있다.
- 구버전 WebKit 기반 브라우저에선 버그(5991) 때문에 document.documentElement가 아닌 document.body를 사용해야 원하는 값을 구할 수 있다.
→ window객체의 pageXOffset과 pageYOffset을 사용하면 브라우저 상관없이 스크롤 정보를 구할 수 있어서 이런 예외 상황을 외워두지 않아도 된다.
alert('세로 스크롤에 의해 가려진 위쪽 영역 높이: ' + window.pageYOffset);
alert('가로 스크롤에 의해 가려진 왼쪽 영역 너비: ' + window.pageXOffset);
scrollTo, scrollBy로 스크롤 상태 변경하기
중요!
자바스크립트를 사용해 스크롤을 움직이려면 DOM이 완전히 만들어진 상태이어야 한다.
<head>에 있는 스크립트에서 페이지 전체의 스크롤을 움직이려 하면 잘 동작하지 않을 수 있따.
일반 요소의 스크롤 상태는 scrollTop 이나 scrollLeft 로 쉽게 변경할 수 있다.
페이지 전체의 스크롤 상태 역시 document.documentElement의 scrollTop / scrollLeft 를 사용해 변경 가능하다.
- 다만 사파리는 document.body 의 scrollTop / scrollLeft를 써야한다.
다른 대안? 편하고 브라우저 상관없이 쓸 수 있다.
scrollBy(x,y)메서드를 사용하면 페이지의 스크롤 상태를 현재 포지션을 기준으로 상대적으로 조정한다.
- scrollBy(0,10)는 문서의 스크롤 상태를 현재를 기준으로 스크롤을 10px아래로 내린것 처럼 움직인다.
반면 scrollTo(pageX,pageY)메서드는 절대 좌표를 기준으로 페이지 스크롤 상태를 변경한다.
- 그래서 scrollTo(0,0)을 호출하면 문서 스크롤 상태를 처음 상태로 되돌릴 수 있다.
→ 두 메서드는 브라우저 종류에 상관없이 동일한 동작을 보장한다.
scrollIntoView
elem.scrollIntoView(top)
https://developer.mozilla.org/ko/docs/Web/API/Element/scrollIntoView
- 전체 페이지 스크롤이 움직여 elem이 눈에 보이는 상태로 변경된다.
- 인수를 하나 받는데, 인수에 따라 다음과 같이 동작한다.
- top이 true(디폴트)인 경우, elem이 창 제일 위에 보이도록 스크롤 상태가 변경된다.
- top이 false인 경우, elem이 창 가장 아래에 보이도록 스크롤 상태가 변경된다.
스크롤 막기
때에 따라 문서 스크롤바를 ‘고정’ 해야 하는 경우가 생긴다.
- ex) 사용자에게 반드시 전달해야 하는 중요한 메시지가 있어서 이 메시지를 화면에 크게 띄우고, 사용자가 스크롤을 움직여 다른 콘텐츠를 보지 못하게 한 상태에서 메시지를 읽게 하려는 경우
document.body.style.overflow = "hidden"
- 해당 스크립트가 동작하면 페이지의 스크롤바 위치가 ‘고정’된다.
document.body.style.overflow = ‘hidden’
document.body.style.overflow = ‘’
이 방법은 document.body요소 뿐만 아니라 다른 요소의 스크롤을 고정시킬 때도 사용할 수 있다.
- 하지만, 이 방법은 스크롤바가 사라진다는 단점이 있다.
- 스크롤바는 일정 공간을 차지하는데, 스크롤바가 사라지면 해당 공간을 채우기 위해 콘텐츠가 갑자기 ‘움직이는’ 현상이 발생한다.
- 이렇게 페이지 전체의 스크롤 상태가 갑자기 변경되면 사용자 입장에선 이상해 보일 수 있기 때문에 개발자는 스크롤바를 고정시키기 전과 후의 clientWidth값을 비교해서 해당 증상을 보정해야 한다.
- 스크롤바가 사라질 땐 clientWidth값이 커지는데 이때 스크롤바가 차지했던 영역만큼 document.body에 padding을 줘서 콘텐츠 전체의 너비를 스크롤바가 사라지기 전과 같은 값으로 유지할 수 있다.
글이 안올라갔었다니 하...
'FE' 카테고리의 다른 글
| 1.9 요소 사이즈와 스크롤 (0) | 2024.11.17 |
|---|---|
| 1.8 스타일과 클래스 (0) | 2024.11.16 |
| 1.7 문서 수정하기 (4) | 2024.11.15 |
| 1.6 속성과 프로퍼티 (0) | 2024.11.14 |
| 1.5 주요 노드 프로퍼티 (2) (1) | 2024.11.13 |
