Element: scrollWidth プロパティ

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>

結果

仕様書

Specification
CSSOM View Module
# dom-element-scrollwidth

ブラウザーの互換性

BCD tables only load in the browser

関連情報