-
Notifications
You must be signed in to change notification settings - Fork 8k
/
index.md
93 lines (71 loc) · 2.29 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
---
title: Element.scrollWidth
slug: Web/API/Element/scrollWidth
---
{{ APIRef("DOM") }}
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 {{ domxref("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
{{Specifications}}
## Referências
{{Compat}}
## Veja também
- {{domxref("Element.clientWidth")}}
- {{domxref("HTMLElement.offsetWidth")}}
- [Determinando as dimensões dos elementos](/pt-BR/docs/Determining_the_dimensions_of_elements)