각각 offsetWidth, clientWidth, scrollWidth 및 -Height 이해

질문 : 각각 offsetWidth, clientWidth, scrollWidth 및 -Height 이해

---

offsetWidth / clientWidth / scrollWidth (및 -Height )와 관련하여 StackOverflow에 대한 몇 가지 질문이 있지만 해당 값이 무엇인지에 대한 포괄적 인 설명은 제공하지 않습니다.

또한 웹에는 혼란 스럽거나 잘못된 정보를 제공하는 여러 소스가 있습니다.

시각적 힌트를 포함하여 완전한 설명을 할 수 있습니까? 또한 이러한 값을 사용하여 스크롤 막대 너비를 계산하려면 어떻게해야합니까?

반응형

답변

---

CSS 상자 모델은 특히 스크롤 콘텐츠와 관련하여 다소 복잡합니다. 브라우저는 CSS의 값을 사용하여 상자를 그리는 반면, CSS 만있는 경우 JS를 사용하여 모든 치수를 결정하는 것은 간단하지 않습니다.

이것이 각 요소가 사용자의 편의를 위해 offsetWidth , offsetHeight , clientWidth , clientHeight , scrollWidth 및 scrollHeight 라는 6 개의 DOM 속성을 갖는 이유입니다. 이들은 현재 시각적 레이아웃을 나타내는 읽기 전용 속성이며 모두 정수입니다 (따라서 반올림 오류가 발생할 수 있음).

자세히 살펴 보겠습니다.

• offsetWidth , offsetHeight : 모든 테두리를 포함하는 시각적 상자의 크기입니다. display: block width / height , 패딩 및 테두리를 추가하여 계산할 수 있습니다.
• clientWidth , clientHeight : 테두리 또는 스크롤 막대를 포함하지 않고 패딩을 포함하는 상자 콘텐츠의 시각적 부분입니다. CSS에서 직접 계산할 수 없으며 시스템의 스크롤 막대 크기에 따라 다릅니다.
• scrollWidth , scrollHeight : 현재 스크롤 영역 외부에 숨겨져있는 부분을 포함하여 모든 상자 내용의 크기입니다. CSS에서 직접 계산할 수 없으며 내용에 따라 다릅니다.

offsetWidth 는 스크롤 막대 너비를 고려하므로 수식을 통해 스크롤 막대 너비를 계산하는 데 사용할 수 있습니다.

scrollbarWidth = offsetWidth - clientWidth - getComputedStyle().borderLeftWidth - getComputedStyle().borderRightWidth

offsetWidth 와 clientWidth 는 항상 정수이고 실제 크기는 줌 레벨이 1이 아닌 소수 일 수 있으므로 반올림 오류가 발생할 수 있습니다.

이

scrollbarWidth = getComputedStyle().width + getComputedStyle().paddingLeft + getComputedStyle().paddingRight - clientWidth

Chrome은 스크롤바를 이미 뺀 width 를 반환하기 때문에 Chrome에서 안정적으로 작동하지 않습니다. (또한 Chrome은 paddingBottom을 스크롤 콘텐츠의 맨 아래로 렌더링하지만 다른 브라우저는 그렇지 않습니다)

출처 : https://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively