diff options
Diffstat (limited to 'files/pt-br/web/api/element/scrollleft/index.html')
| -rw-r--r-- | files/pt-br/web/api/element/scrollleft/index.html | 83 |
1 files changed, 83 insertions, 0 deletions
diff --git a/files/pt-br/web/api/element/scrollleft/index.html b/files/pt-br/web/api/element/scrollleft/index.html new file mode 100644 index 0000000000..30df424288 --- /dev/null +++ b/files/pt-br/web/api/element/scrollleft/index.html @@ -0,0 +1,83 @@ +--- +title: Element.scrollLeft +slug: Web/API/Element/scrollLeft +translation_of: Web/API/Element/scrollLeft +--- +<p>{{ APIRef("DOM") }}</p> + +<p>A propriedade <strong>Element.scrollLeft</strong> obtem, ou define o número de pixels do contéudo de um elemento que é rolado para a esquerda.</p> + +<p>Note que se os {{cssxref("direction")}} do elemento do elemento é rtl (direita-para-esquerda) então <code>scrollLeft</code> é <code>0</code> quando a barra de rolagem está na posição mais à direita (o início do conteúdo rolado) e então, fica cada vez mais negativa à medida que se desloca em direção ao fim do conteúdo.</p> + +<h2 id="Syntax_and_values" name="Syntax_and_values">Sintaxe</h2> + +<pre class="eval">// Obtem o número de pixels rolado +var <var>sLeft</var> = <var>element</var>.scrollLeft; +</pre> + +<p><var>sLeft</var> é um inteiro representando o número de pixels do <em>elemento</em> que foi movido para a esquerda.</p> + +<pre class="eval">// Define o número de pixels rolado +<var>element</var>.scrollLeft = 10; +</pre> + +<p><code>scrollLeft</code> pode ser definido para qualquer valor inteiro, entretanto:</p> + +<ul> + <li>Se o elemento não pode ser rolado (ex.: ele é no overflow), <code>scrollLeft</code> é definido para 0.</li> + <li>Se definido um valor menor que 0 (maior que 0 para elementos direita-para-esquerda), <code>scrollLeft</code> é definido para 0.</li> + <li>Se o definido um valor maior que o máximo, que o conteúdo pode ser rolado, é<code>scrollLeft</code> é definido para o valor máximo.</li> +</ul> + +<h2 id="Example" name="Example">Exemplo</h2> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <style> + #container { + border: 1px solid #ccc; height: 100px; overflow: scroll; width: 100px; + } + #content { + background-color: #ccc; width: 250px; + } + </style> + <script> + document.addEventListener('DOMContentLoaded', function () { + var button = document.getElementById('slide'); + button.onclick = function () { + document.getElementById('container').scrollLeft += 20; + }; + }, false); + </script> +</head> +<body> + <div id="container"> + <div id="content">Lorem ipsum dolor sit amet.</div> + </div> + <button id="slide" type="button">Slide</button> +</body> +</html> +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificações</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('CSSOM View', '#dom-element-scrollleft', 'scrollLeft')}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="References" name="References">Referências</h2> + +<p>{{Compat("api.Element.scrollLeft")}}</p> |