# .scrollBox

[browser](../../../..) ⟩ [DOM](../../..) ⟩ [type](../..) ⟩ [Element](..) ⟩ [boxes](../boxes) ⟩ [Element+boxes]() ⟩ .scrollBox

{% hint style="success" %}
( [.scrollWidth](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth), [.scrollHeight](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight) ) = .[paddingBox](padding) + [<mark style="color:orange;">**overflow**</mark>](../../../../../css/properties/overflow)
{% endhint %}

{% tabs %}
{% tab title="🗺️ 圖表" %}
* :floppy\_disk: [](<> "mention")

<img src="https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2FLpfgyjDqaZM5ctLik3TM%2Fscroll.box.svg?alt=media&#x26;token=f3fb5cd8-765e-449c-babd-5c36cf74108e" alt="elem.scrollBox" class="gitbook-drawing">
{% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="success" %}
* .paddingBox：[.clientWidth](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth)/[.clientHeight](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight) = content + padding
* .scrollBox     ：[.scrollWidth](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth)/[.scrollHeight](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight) = content + padding + <mark style="color:orange;">**overflow**</mark>
* if <mark style="color:red;">**no**</mark>**&#x20;**<mark style="color:orange;">**overflow**</mark>, they are the <mark style="color:yellow;">**same**</mark>.
{% endhint %}

{% hint style="warning" %}
* ( [.scrollWidth](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth), [.scrollHeight](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight) ) will round to <mark style="color:yellow;">**integer**</mark>.&#x20;
* use [elem.getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect), if <mark style="color:yellow;">**fractional**</mark> value is needed.
{% endhint %}
{% endtab %}

{% tab title="👥 相關" %}
* [boxes](../boxes "mention")
* element [padding](padding "mention")
* document [size](../../document/size "mention")
* [viewport](../../window/viewport "mention") size.
* [css](../../../../../css "mention") [overflow](../../../../../css/properties/overflow "mention")
{% endtab %}

{% tab title="📗 參考" %}
* [ ] JS.info ⟩ Element size and scrolling ⟩ [scrollWidth/scrollHeight](https://javascript.info/size-and-scroll#scrollwidth-height)
{% endtab %}

{% tab title="📘 手冊" %}
* [..](.. "mention") ⟩&#x20;
  * [.clientWidth](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth), [.clientHeight](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight)
  * [.scrollLeft](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft), [.scrollTop](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop), [.scrollTo()](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo), [.scrollWidth](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth), [.scrollHeight](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight)
* [window](../../window "mention") ⟩&#x20;
  * .[scrollX](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollX), .[scrollY](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY)&#x20;
{% endtab %}
{% endtabs %}
