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>