[Javascript log] 문서 (4)

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

창이 차지하는 너비와 높이를 알려면 document.documentElement의 clientWidth와 clientHeight를 사용하면 된다. (window.innerWidth/innerHeight는 스크롤바가 차지하는 영역을 포함해 값을 계산하기 때문)

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

일반 요소의 스크롤 상태는 scrollTop이나 scrollLeft로 쉽게 변경할 수 있다.

scrollBy(0,10)는 문서의 스크롤 상태를 현재를 기준으로 10px 아래로 내린다. 반대로 scrollTo(pageX,pageY)는 절대좌표를 기준으로 페이지 스크롤 상태를 변경한다.

elem.scrollIntoView(top)를 호출하면 전체 페이지 스크롤이 움직여 elem이 눈에 보이는 상태로 변경된다.

this.scrollIntoView() : this가 창 제일 위에 보이도록, elem의 위쪽 모서리가 창의 위쪽 모서리와 일치하게 된다.
this.scrollIntoView(false) : this이 창 가장 아래에 보이도록

스크롤바 고정
document.body.style.overflow = "hidden"
풀려면
document.body.style.overflow=""

좌표

좌표체계

1) 창 기준 : position:fixed와 유사하게 창(window) 맨 위 왼쪽 모서리를 기준으로 좌표를 계산한다. 앞으로 이 좌표를 clientX/clientY로 표시할 예정

2) 문서 기준 : 문서(document) 최상단(root)에서 position:absolute를 사용하는 것과 비슷하게 문서 맨 위 왼쪽 모서리를 기준으로 좌표를 계산.이 좌표는 pageX/pageY로 표시할 예정

문서가 스크롤 되었을 때:

pageY – 문서 기준 좌표는 문서 맨 위(오른쪽 그림에선 스크롤 되어 보이지 않음)부터 계산되기 때문에 스크롤 후 값은 전과 동일.
clientY – 문서가 스크롤 되면서 해당 지점이 창 상단과 가까워졌기 때문에 창 기준 좌표가 변한다(화살표가 짧아짐).

getBoundingClientReact() 메서드는 elem을 감싸는 가장 작은 네모의 창 기준 좌표를 DOMRect 클래스의 객체 형태로 반환한다.

DOMRect의 주요 프로퍼티
=>x와 y – 요소를 감싸는 네모의 창 기준 X, Y 좌표
=>width와 height – 요소를 감싸는 네모의 너비, 높이(음수도 가능)

document.elementFromPoint(x, y)을 호출하면 창 기준 좌표 (x, y)에서 가장 가까운 중첩 요소를 반환한다.

let centerX = document.documentElement.clientWidth / 2;
let centerY = document.documentElement.clientHeight / 2;

let elem = document.elementFromPoint(centerX, centerY);

elem.style.background = "red";
alert(elem.tagName);

요소를 창 내 특정 좌표에 고정하기

let elem = document.getElementById("coords-show-mark");

function createMessageUnder(elem, html){
  
  let message = document.createElement('div');
  
  message.style.cssTEXT = "position:fixed; color: red";
  
  let coords = elem.getBoundingClientReact();
  
  message.style.left = coords.left+"px";
  message.style.right = coords.right+"px";
  
  message.innerHTML = html;
  
  return message;
}


let message = createMessageUnder(elem, '독도는 우리땅!');
document.body.append(message);
setTimeout(() => message.remove(), 5000);

pageY = clientY + 문서에서 세로 방향 스크롤에 의해 밀려난 부분의 높이
pageX = clientX + 문서에서 가로 방향 스크롤에 의해 밀려난 부분의 너비