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 September 2020.

A propriedade de somente leitura Element.scrollWidth retorna a largura em pixels do conteúdo de um elemento ou a largura do elemento em si, o que for maior. Se o elemento for mais amplo do que a área de conteúdo (por exemplo, se houver barras de rolagem para percorrer o conteúdo), o scrollWidth é maior do que o clientWidth.

Nota: Esta propriedade irá arredondar o valor para um número inteiro. Se você precisar de um valor fracionário, use element.getBoundingClientRect().

Syntaxe

var xScrollWidth = element.scrollWidth;

xScrollWidth é a largura do conteúdo do elemento em pixels.

Exemplo

html
<!doctype html>
<html>
  <head>
    <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>
    var buttonOne = document.getElementById("aButton"),
      buttonTwo = document.getElementById("anotherButton"),
      divOne = document.getElementById("aDiv"),
      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", function () {
      alertOverflow(divOne);
    });

    buttonTwo.addEventListener("click", function () {
      alertOverflow(divTwo);
    });
  </script>
</html>

Especificações

Specification
CSSOM View Module
# dom-element-scrollwidth

Referências

BCD tables only load in the browser

Veja também