blob: df527ccdc56bc681e399692eefbf977014e34498 (
plain)
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
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>
|
