Element: scrollWidth プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

Element.scrollWidth は読み取り専用のプロパティで、あふれたために画面に表示されない部分を含めた、要素の中身の幅の寸法です。

scrollWidth の値は、水平スクロールバーを使用せずにすべてのコンテンツをビューポート内に合わせるために要素が必要とする最小幅に等しくなります。幅は clientWidth と同じ方法で測定されます。要素のパディングは含みますが、境界線、マージン、垂直スクロールバー（ある場合）は含みません。これには ::before または ::after のような擬似要素の幅を含むことがあります。要素の内容が水平スクロールバーが必要なく合うのであれば、 scrollWidth は clientWidth と等しくなります。

メモ: このプロパティは値を整数値に丸めます。小数値が必要であれば、 element.getBoundingClientRect() を使用してください。

値

文字列です。

例

html

<!doctype html> <html lang="en-US"> <head> <meta charset="UTF-8" /> <title>Example</title> <style> div { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #aDiv { width: 100px; } button { margin-bottom: 2em; } </style> </head> <body> <div id="aDiv">FooBar-FooBar-FooBar-FooBar</div> <button id="aButton">Check for overflow</button> <div id="anotherDiv">FooBar-FooBar-FooBar-FooBar</div> <button id="anotherButton">Check for overflow</button> </body> <script> const buttonOne = document.getElementById("aButton"); const buttonTwo = document.getElementById("anotherButton"); const divOne = document.getElementById("aDiv"); const divTwo = document.getElementById("anotherDiv"); //check to determine if an overflow is happening function isOverflowing(element) { return element.scrollWidth > element.offsetWidth; } function alertOverflow(element) { if (isOverflowing(element)) { alert("Contents are overflowing the container."); } else { alert("No overflows!"); } } buttonOne.addEventListener("click", () => { alertOverflow(divOne); }); buttonTwo.addEventListener("click", () => { alertOverflow(divTwo); }); </script> </html>