element.scrollIntoView

  • Raccourci de la révision : DOM/element.scrollIntoView
  • Titre de la révision : element.scrollIntoView
  • ID de la révision : 177995
  • Créé :
  • Créateur : BenoitL
  • Version actuelle ? Non
  • Commentaire Traduction.

Contenu de la révision

{{template.DomRef()}}

Résumé

La méthode scrollIntoView fait défiler la page pour rendre l'élément visible.

Syntaxe

element.scrollIntoView(alignWithTop);
  • alignWithTop est une valeur booléenne optionnelle qui, si elle vaut true, aligne l'élément avec le haut de la zone de défilement. Si elle vaut false, celui-ci sera aligné en bas.
  • Si aucun paramètre alignWithTop n'est fourni, l'élément sera aligné en haut.

Exemple

<html>
 <head>
  <title>Exemple de scrollIntoView()</title>

  <script type="text/javascript">
    function showIt(elID)
    {
      var el = document.getElementById(elID);
      el.scrollIntoView(true);
    }
  </script>

 </head>
 <body>
  <div style="height: 5em; width: 30em; overflow: scroll;
              border: 1px solid blue;">
    <div style="height: 100px"></div>
    <p id="pToShow">Le paragraphe à afficher</p>
    <div style="height: 100px"></div>
  </div>
  <input type="button" value="Afficher le paragraphe" 
   onclick="showIt('pToShow');">

 </body>
</html>

Notes

L'élément peut ne pas être aligné complètement avec le haut ou le bas, selon la disposition des autres éléments.

Spécification

{{template.DOM0()}}

{{ wiki.languages( { "en": "en/DOM/element.scrollIntoView" } ) }}

Source de la révision

<p>{{template.DomRef()}}
</p>
<h3 name="R.C3.A9sum.C3.A9"> Résumé </h3>
<p>La méthode <b>scrollIntoView</b> fait défiler la page pour rendre l'élément visible.
</p>
<h3 name="Syntaxe"> Syntaxe </h3>
<pre class="eval">element.scrollIntoView(alignWithTop);
</pre>
<ul><li> <code>alignWithTop</code> est une valeur booléenne optionnelle qui, si elle vaut <code>true</code>, aligne l'élément avec le haut de la zone de défilement. Si elle vaut <code>false</code>, celui-ci sera aligné en bas.
</li><li> Si aucun paramètre <code>alignWithTop</code> n'est fourni, l'élément sera aligné en haut.
</li></ul>
<h3 name="Exemple"> Exemple </h3>
<pre>&lt;html&gt;
 &lt;head&gt;
  &lt;title&gt;Exemple de scrollIntoView()&lt;/title&gt;

  &lt;script type="text/javascript"&gt;
    function showIt(elID)
    {
      var el = document.getElementById(elID);
      el.scrollIntoView(true);
    }
  &lt;/script&gt;

 &lt;/head&gt;
 &lt;body&gt;
  &lt;div style="height: 5em; width: 30em; overflow: scroll;
              border: 1px solid blue;"&gt;
    &lt;div style="height: 100px"&gt;&lt;/div&gt;
    &lt;p id="pToShow"&gt;Le paragraphe à afficher&lt;/p&gt;
    &lt;div style="height: 100px"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;input type="button" value="Afficher le paragraphe" 
   onclick="showIt('pToShow');"&gt;

 &lt;/body&gt;
&lt;/html&gt;
</pre>
<h3 name="Notes"> Notes </h3>
<p>L'élément peut ne pas être aligné complètement avec le haut ou le bas, selon la disposition des autres éléments.
</p>
<h3 name="Sp.C3.A9cification"> Spécification </h3>
<p>{{template.DOM0()}}
</p>{{ wiki.languages( { "en": "en/DOM/element.scrollIntoView" } ) }}
Revenir à cette révision