Element: scrollWidth プロパティ

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

scrollWidth は Element インターフェイスの読み取り専用プロパティで、オーバーフローしたために画面に表示されない部分を含めた、要素のコンテンツの幅の寸法です。

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

HTML

html

<div id="div1">FooBar-FooBar-FooBar-FooBar</div>
<button id="button1">オーバーフローをチェック</button>
<pre id="log1"></pre>
<div id="div2">FooBar-FooBar-FooBar-FooBar</div>
<button id="button2">オーバーフローをチェック</button>
<pre id="log2"></pre>

CSS

css

div {
 padding: 0.15em;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
}
button {
 margin: 0.15em 0 0.5em 0;
}
pre {
 margin: 0.5em 0;
}
#div1 {
 width: 100px;
}
#log1 {
 margin-bottom: 2em;
}

JavaScript

const button1 = document.getElementById("button1");
const button2 = document.getElementById("button2");
const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");
const log1 = document.getElementById("log1");
const log2 = document.getElementById("log2");
// scrollWidth が clientWidth より大きいかどうかを調べる
function isOverflowing(element) {
 return element.scrollWidth > element.clientWidth;
}
function checkOverflow(element, log) {
 if (isOverflowing(element)) {
 log.innerText = `コンテンツはオーバーフローしています。 scrollWidth は ${element.scrollWidth}px です`;
 } else {
 log.innerText = `オーバーフローはありません。 scrollWidth は ${element.scrollWidth}px です`;
 }
}
button1.addEventListener("click", () => {
 checkOverflow(div1, log1);
});
button2.addEventListener("click", () => {
 checkOverflow(div2, log2);
});