diff options
Diffstat (limited to 'files/es/web/api/element/scrollleft/index.html')
| -rw-r--r-- | files/es/web/api/element/scrollleft/index.html | 153 |
1 files changed, 153 insertions, 0 deletions
diff --git a/files/es/web/api/element/scrollleft/index.html b/files/es/web/api/element/scrollleft/index.html new file mode 100644 index 0000000000..df527ccdc5 --- /dev/null +++ b/files/es/web/api/element/scrollleft/index.html @@ -0,0 +1,153 @@ +--- +title: Element.scrollLeft +slug: Web/API/Element/scrollLeft +tags: + - API + - Necesita Tabla de Compatibilidad + - Necesita Trabajo de Markup + - Necesita tabla de Especificaciones + - Propiedad + - Referencia + - Vista CSSOM +translation_of: Web/API/Element/scrollLeft +--- +<p>{{ APIRef("DOM") }}</p> + +<p>La propiedad <strong><code>Element.scrollLeft</code></strong><span id="result_box" lang="es"><span> obtiene o establece el número de píxeles que desplaza el contenido de un elemento hacia la izquierda.</span></span></p> + +<p><span id="result_box" lang="es"><span>Tenga en cuenta que si el elemento <code>{{cssxref ( "dirección")}} </code>del elemento es <code>rtl </code>(</span></span>derecha-a-izquierda<span lang="es"><span>), entonces<code> scrollLeft</code> es 0 cuando la barra de desplazamiento está en su posición más a la derecha (al inicio del contenido desplazado) y cada vez más</span> <span>Negativo mientras se desplaza hacia el final del contenido.</span></span></p> + +<h2 id="Syntax_and_values" name="Syntax_and_values">Síntasix</h2> + +<pre class="eval">// <span class="short_text" id="result_box" lang="es"><span>Obtener el número de píxeles desplazados</span></span> +var <var>sLeft</var> = <var>element</var>.scrollLeft; +</pre> + +<p><span id="result_box" lang="es"><span><em>SLeft</em> es un número entero que representa el número de píxeles que el elemento ha desplazado hacia la izquierda.</span></span></p> + +<pre class="eval">// <span class="short_text" id="result_box" lang="es"><span>Establecer el número de píxeles desplazados</span></span> +<var>element</var>.scrollLeft = 10; +</pre> + +<p><span id="result_box" lang="es"><span><code>ScrollLeft</code> se puede establecer en cualquier valor entero, sin embargo:</span></span></p> + +<ul> + <li> + <div id="gt-text-top"> + <div class="g-unit" id="gt-src-c"> + <div id="gt-src-p"> + <div id="gt-src-wrap"> + <div dir="ltr" style="zoom: 1;"><span id="result_box" lang="es"><span>Si el elemento no se puede desplazar (por ejemplo, no tiene desbordamiento), <code>scrollLeft </code>se establece en 0.</span></span></div> + </div> + </div> + </div> + </div> + </li> + <li> <span id="result_box" lang="es"><span>Si se establece en un valor menor que 0 (mayor que 0 para elementos de derecha a izquierda), <code>scrollLeft</code> se establece en 0.</span></span></li> + <li><span id="result_box" lang="es"><span>Si se establece en un valor mayor que el máximo que se puede desplazar el contenido,<code> scrollLeft </code>se establece en el valor máximo.</span></span></li> +</ul> + +<h2 id="Example" name="Example">Ejemplo</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="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('CSSOM View', '#dom-element-scrollleft', 'scrollLeft')}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_los_navegadores">Compatibilidad en los navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Función</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Función</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> |