offset
자바스크립트에서 offset이라고 하면 margin을 포함하지 않고 요소의 외부를 측정한 길이를 알려줍니다.
margin을 잘 안쓰려고 노력한다면 편하게 사용할 수 있습니다.
offsetParent
offsetParent 프로퍼티는 해당 요소를 렌더링할 때, 좌표 계산에서 사용되는 가장 가까운 조상 요소의 참조를 반환합니다.
offsetLeft, offsetTop
offsetLetf/Top 프로퍼티는 offsetParent를 기준으로 각각 오른쪽, 아래쪽으로 얼마나 떨어져 있는지 나타냅니다.
offsetWidth, offsetHeight
offsetWidth/Height 프로퍼티는 요소가 차지하는 너비와 높이 정보를 제공합니다. (margin 제외)
client
자바스크립트에서 client는 요소 내부의 길이를 측정하여 알려줍니다.
clientTop, clientLeft
clientTop/Left를 사용하면 각각 왼쪽, 위쪽 border 두께를 측정할 수 있습니다.
css의 border-top-width와 border-left-width를 생각하면 됩니다.
clientWidth, clientHeight
clientWidth/Height를 사용하면 border 안 영역의 사이즈 정보를 제공합니다.
이때 스크롤바 사이즈는 포함되지 않는다는 것을 주의해야 합니다.
scroll
scroll은 스크롤에 의해서 감춰져있는 길이의 정보를 알려줍니다. (스크롤바 크기는 마찬가지로 포함되지 않습니다.)
scrollWidth, scrollHeight
scrollWidth/Height 프로퍼티는 client와 유사하지만 스크롤바에 의해 감춰진 영역도 포함합니다.
아래 사진에서는 세로 스크롤바가 존재하므로 감춰진 전체 세로 영역의 길이를 알 수 있습니다.
scrollLeft, scrollTop
scrollLeft/Top은 스크롤에 의해 가려진 영역의 너비와 높이를 나타냅니다. (border 포함)
scrollBottom은 다음과 같이 구할 수 있습니다.
const scrollBottom = elem.scrollHeight - elem.scrollTop - elem.clientHeight;스크롤바 너비 구하기
스크롤바의 너비는 다음과 같이 구할 수 있습니다.
const scrollBarWidth = elem.offsetWidth - elem.clientWidth - 2 * elem.clientLeft;References
