blob: 4504219afa8fa65a000674d456437dac417d9b65 (
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
|
---
title: Element.scrollIntoView()
slug: Web/API/Element/scrollIntoView
tags:
- Experimental
- Expérimental(2)
- metodo
translation_of: Web/API/Element/scrollIntoView
---
<div>{{ APIRef("DOM")}}</div>
<p>El método <code><strong>scrollIntoView()</strong></code> de la interfaz {{domxref("Element")}} desplaza el contenedor principal del elemento de forma que el elemento sobre el cual se invoca <code>scrollIntoView()</code> sea visible al usuario.</p>
<h2 id="Syntax" name="Syntax">Sintaxis</h2>
<pre class="syntaxbox notranslate">element.scrollIntoView(); // Equivalente a <code>element.scrollIntoView(true)
</code>element.scrollIntoView(<em>alignToTop</em>); // Argumentos booleanos
element.scrollIntoView(<em>scrollIntoViewOptions</em>); // Argumento objeto
</pre>
<h3 id="Parámetros">Parámetros</h3>
<dl>
<dt><em><code>alignToTop</code></em></dt>
<dd>Es un valor {{jsxref("Boolean")}}:
<ul>
<li>Si es <code>true</code>, la parte superior del elemento se alineará con la parte superior del área visible del elemento desplazable antecesor.</li>
<li>Si es <code>false</code>, la parte inferior del elemento se alineará con la parte inferior del área visible del elemento desplazable antecesor.</li>
</ul>
</dd>
<dt><em><code>scrollIntoViewOptions</code></em> {{optional_inline}} {{experimental_inline}}</dt>
<dd>Un booleano o un objeto con las siguientes opciones:</dd>
<dt><code>behavior</code> {{optional_inline}}</dt>
<dd>Establece la transición de la animación.<br>
Puede ser <code>auto</code> o <code>smooth</code>. Por defecto es <code>auto</code>.</dd>
<dt><code>block</code> {{optional_inline}}</dt>
<dd>Establece el alineamiento vertical.<br>
Puede ser <code>start</code>, <code>center</code>, <code>end</code>, o <code>nearest</code>. Por defecto es <code>start</code>.</dd>
<dt><code>inline</code> {{optional_inline}}</dt>
<dd>Establece el alineamiento horizontal<br>
Puede ser <code>start</code>, <code>center</code>, <code>end</code>, o <code>nearest</code>. Por defecto es <code>nearest</code>.</dd>
</dl>
<h2 id="Example" name="Example">Ejemplo</h2>
<pre class="brush: javascript notranslate">var element = document.getElementById("box");
element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({block: "end", behavior: "smooth"});
</pre>
<h2 id="Notas">Notas</h2>
<p>Puede que el desplazamiento no sea llevado completamente a la parte superior o inferior dependiente de la disposición de otros elementos. </p>
<h2 id="Specification" name="Specification">Especificación</h2>
<table>
<thead>
<tr>
<th>Especificación</th>
<th>Estado</th>
<th>Comentario</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}}</td>
<td>{{Spec2("CSSOM View")}}</td>
<td>Definición inicial</td>
</tr>
</tbody>
</table>
<ul>
<li><a class="external" href="http://dev.w3.org/csswg/cssom-view/#dom-element-scrollintoview">CSSOM: Scrolling elements into view</a></li>
</ul>
<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Implementación básica</td>
<td>1.0</td>
<td>{{ CompatGeckoDesktop(1.0) }}</td>
<td>6</td>
<td>10.0 and possibly older versions</td>
<td>4 and possibly older versions</td>
</tr>
<tr>
<td>
<p>Implementan<br>
<code>scrollIntoViewOptions</code></p>
</td>
<td>{{CompatNo}}</td>
<td>{{ CompatGeckoDesktop(36) }}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Implementación básica</td>
<td>?</td>
<td>{{ CompatGeckoMobile(1.0) }}</td>
<td>?</td>
<td>?</td>
<td>?</td>
</tr>
<tr>
<td>
<p>Implementan<br>
<code>scrollIntoViewOptions</code></p>
</td>
<td>{{CompatNo}}</td>
<td>{{ CompatGeckoMobile(36) }}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
|
