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 julho de 2015.
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
Loading…