[javascript] 화면 상에서의 위치

모바일 화면에서 아래쪽에 모달 처럼 뜨는 (bottom sheet라고 하더이다.)를 구현해보고 싶어서 서칭을 하던 중. 콴다 기술 블로그에서 구현 방법을 자세하게 적어둔 글을 보게 되었다. 따라해보는데, 내가 그동안 화면 내에서의 높이, 길이, 너비 등등을 제대로 이해하지 못하고 있었구나. 라는 생각이 들어서 정리를 해보기로 했다.

화면의 element size

need to know the total amount of space an element occupies

HTMLElement.offsetWidth, HTMLElement.offsetHeight는 엘리먼트의 전체 크기를 반환. padding, border, scroll bar의 크기를 포함한다.

need to know how much space the actual displayed content takes up

HTMLElement.clientWidth, HTMLElement.clientHeight, 는 padding만 포함해서 element의 크기를 반환한다.

need to know the actual size of the content

HTMLElement.scrollWidth, HTMLElement.scrollHeight, 는 화면에 보이는 것에 상관없이 실제 element 크기를 반환한다.

offsetWidth vs getBoundingClientRect()

두 프로퍼티(와 매서드) 모두 element의 크기를 가죠올 수 있는 방법이다. 이 중 getBoundingClientRect()를 통해서 화면에 보여지는 element의 위치를 알 수 있다.

이 때, 기준은 화면상이므로 실제 document의 아래쪽으로 스크롤이 내려와 화면상에서 위로 바깥으로 벗어나게 된다면 음수의 값이 나올 수도 있다.

const rect = element.getBoundingclientRect();

{
x : 256.3078918457031

y : 49.98843002319336

width : 439.9653015136719

height : 239.9652862548828

top : 49.98843002319336

right : 696.273193359375

bottom : 289.9537162780762

left : 256.3078918457031
}

mouse event

서칭을 해보다가 mouse event의 좌표를 얻어올 수 있다는 점도 찾을 수 있었다.

clientX, clientY

mouse event가 일어나는 viewport에서의 x,y를 나타낸다.
따라서 scroll이 일어나도 동일한 값을 낸다.

screenX, screenY

global(screen)에서의 마우스 위치를 나타낸다.

offsetX, offsetY

mouse event가 일어나는 element 안에서의 x, y를 나타낸다.

pageX, pageY

전체 문서를 기준으로 마우스의 위치를 나타낸다.

어떤 것을 사용할까??

우리가 보는 화면 상에서의 element와 mouse event를 사용해야 한다면,
getBoundingClientRect()와 clientX/Y를 사용하면 된다.

참고

https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements
https://hianna.tistory.com/493