files/fr/web/api/element/scrollleft/index.html


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

---
title: element.scrollLeft
slug: Web/API/Element/scrollLeft
tags:
  - DOM
  - DOM_0
translation_of: Web/API/Element/scrollLeft
---
<p>{{ ApiRef() }}</p>

<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>

<p>Définit ou obtient le nombre de pixels dont le contenu est défilé vers la gauche.</p>

<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>

<pre class="eval">// Obtient le nombre de pixels défilés
var <var>sLeft</var> = <var>element</var>.scrollLeft;
</pre>

<p><var>sLeft</var> est un entier représentant le nombre de pixels dont <var>element</var> a été défilé vers la gauche.</p>

<pre class="eval">// Définit le nombre de pixels défilés
<var>element</var>.scrollLeft = 10;
</pre>

<p><strong>scrollLeft</strong> peut être n'importe quelle valeur entière, cependant :</p>

<ul>
 <li>Si l'élément ne peut pas défiler (par exemple parce qu'il ne déborde pas), <code>scrollLeft</code> est mis à 0.</li>
 <li>S'il reçoit une valeur inférieure à 0, <code>scrollLeft</code> est mis à 0.</li>
 <li>S'il reçoit une valeur plus grande que le maximum dont le contenu peut défiler, <code>scrollLeft</code> est mis au maximum.</li>
</ul>

<h3 id="Exemple" name="Exemple">Exemple</h3>

<pre>&lt;script type="text/javascript"&gt;

function doScrollLeft(el, p)
{
  el.scrollLeft = p;
}

&lt;/script&gt;

&lt;div id="aDiv"
     style="width: 100px; height: 200px; overflow: auto;"
&gt;
&lt;script type="text/javascript"&gt;
for (var i=0; i&lt;100; ++i){
  document.write(i + '-FooBar-FooBar-FooBar&lt;br&gt;');
}
&lt;/script&gt;
&lt;/div&gt;
&lt;br&gt;
&lt;input type="button" value="Défile de 50 pixels"
       onclick="doScrollLeft(document.getElementById('aDiv'), 50);"
&gt;
</pre>

<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>

<p>{{ DOM0() }}</p>

<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3>

<ul>
 <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/scrollleft.asp"><em>scrollLeft</em> sur MSDN</a></li>
</ul>

<p>{{ languages( { "en": "en/DOM/element.scrollLeft", "pl": "pl/DOM/element.scrollLeft" } ) }}</p>