> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/browser/dom/type/element/+boxes/scroll.md).

# .scrollBox

[browser](/web/browser.md) ⟩ [DOM](/web/browser/dom.md) ⟩ [type](/web/browser/dom/type.md) ⟩ [Element](/web/browser/dom/type/element.md) ⟩ [boxes](/web/browser/dom/type/element/boxes.md) ⟩ [Element+boxes](/web/browser/dom/type/element/+boxes.md) ⟩ .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](/web/browser/dom/type/element/+boxes/padding.md) + [<mark style="color:orange;">**overflow**</mark>](/web/css/properties/overflow.md)
{% endhint %}

{% tabs %}
{% tab title="🗺️ 圖表" %}

* :floppy\_disk: [Element+boxes](/web/browser/dom/type/element/+boxes.md)

<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&amp;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="👥 相關" %}

* [box models](/web/browser/dom/type/element/boxes.md)
* element [.paddingBox](/web/browser/dom/type/element/+boxes/padding.md)
* document [document size](/web/browser/dom/type/document/size.md)
* [viewport](/web/browser/dom/type/window/viewport.md) size.
* [CSS](/web/css.md) [overflow](/web/css/properties/overflow.md)
  {% endtab %}

{% tab title="📗 參考" %}

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

{% tab title="📘 手冊" %}

* [Element](/web/browser/dom/type/element.md) ⟩&#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](/web/browser/dom/type/window.md) ⟩&#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 %}