From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/api/element/scrollleft/index.html | 153 +++++++++++++++++++++++++ 1 file changed, 153 insertions(+) create mode 100644 files/es/web/api/element/scrollleft/index.html (limited to 'files/es/web/api/element/scrollleft') 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 +--- +

{{ APIRef("DOM") }}

+ +

La propiedad Element.scrollLeft obtiene o establece el número de píxeles que desplaza el contenido de un elemento hacia la izquierda.

+ +

Tenga en cuenta que si el elemento {{cssxref ( "dirección")}} del elemento es rtl (derecha-a-izquierda), entonces scrollLeft 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 Negativo mientras se desplaza hacia el final del contenido.

+ +

Síntasix

+ +
// Obtener el número de píxeles desplazados
+var sLeft = element.scrollLeft;
+
+ +

SLeft es un número entero que representa el número de píxeles que el elemento ha desplazado hacia la izquierda.

+ +
// Establecer el número de píxeles desplazados
+element.scrollLeft = 10;
+
+ +

ScrollLeft se puede establecer en cualquier valor entero, sin embargo:

+ + + +

Ejemplo

+ +
<!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>
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSSOM View', '#dom-element-scrollleft', 'scrollLeft')}}{{Spec2("CSSOM View")}} 
+ +

Compatibilidad en los navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Básico{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FunciónAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Soporte Básico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
-- cgit v1.2.3-54-g00ecf