oujood.com

ScrollLeft() & scrollTop() position horizontale et verticale de la bar de défilement

Méthode ScrollLeft() & scrollTop() pour retourner,définir ou régler position horizontale ou verticale de la bar de défilement Scrollbar

chercher |

Jquery la méthode ScrollLeft()

jQuery cours tutorial

La position horizontale de la barre de défilement est le nombre de pixels défiler à partir de son côté gauche. Lorsque la barre de défilement est sur l'extrême gauche, la position est égal à 0.


Retour de la position horizontale bar de défilement Scrollbar

Renvoie la position horizontale de la barre de défilement pour le premier élément dans lensemble des éléments sélectionnés.

Syntaxe

$( selector ).scrollLeft()

Exemple :       Copier le code

  <!DOCTYPE html>
  <html>
  <body>
  <div style="border:1px solid black;width:100px;height:130px;overflow:auto">
  Le mot le plus long dans le dictionnaire anglais est le suivant:
  pneumonoultramicroscopicsilicovolcanoconiosis.
  </div>
  <button>Donner la position horizontale du curseur</button>
  <p>Déplacez la barre de défilement vers la droite et cliquez sur le bouton à
  nouveau.</p>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
  $(document).ready(function(){
  $("button").click(function(){
  alert($("div").scrollLeft()+" px");
  });
  });
  </script>
  </body>
  </html>

Définit la position horizontale de la barre de défilement pour tous les éléments sélectionés.

Syntaxe

$(sélecteur).scrollLeft(position)

Paramètre

Description

position Facultatif. Spécifie la nouvelle position en pixels

Exemple :       Copier le code

  <!DOCTYPE html>
  <html>
  <head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
  $(document).ready(function(){
  $("button").click(function(){
  $("div").scrollLeft(50);
  });
  });
  </script>
  </head>
  <body>
  <div style="border:1px solid black;width:100px;height:130px;overflow:auto">
  Le mot le plus long dans le dictionnaire anglais est le suivant:
  pneumonoultramicroscopicsilicovolcanoconiosis.
  </div>
  <button>Régler la position horizontale du cursseur à 50 px</button>
  <p>Déplacez la barre de défilement cliquez sur le bouton à nouveau.</p>
  </body>
  </html>

Jquery La méthode scrollTop()

La méthode scrollTop() définit ou renvoie la position verticale de la barre de défilement pour les éléments sélectionnés.

La position verticale de la barre de défilement est le nombre de pixels de défilement du haut. Lorsque la barre de défilement est sur le dessus, la position est 0.


Retourne la Position de barre de défilement verticale

La méthode scrollTop() renvoie la position verticale de la barre de défilement pour le première élément.

Syntaxe

$(selector).scrollTop()

Exemple: Obtenir la scrollTop d'un paragraphe.

Exemple :       Copier le code

  <!DOCTYPE html>
  <html>
  <head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
  $(document).ready(function(){
  $("button").click(function(){
  p = $("p:first");
  $("p:last").text( "la scrollTop est: " + p.scrollTop() );
  });
  });
  </script>
  <style>
  p { margin:10px;padding:5px;border:2px solid #666; }
  </style>
  </head>
  <body>
  <p>Bonjour</p><p></p>
  <button>Obtenir la scrollTop</button>
  </body>
  </html>

Définir la Position de barre de défilement verticale

Définit la position verticale de la barre de défilement pour tous les éléments assortis.

Syntaxe

$(selector).scrollTop(position)

Paramètre Description
position Facultatif. Spécifie la nouvelle position en pixels

Exemple : Définir la scrollTop d'un div.

Exemple :       Copier le code

  <!DOCTYPE html>
  <html>
  <head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
  $(document).ready(function(){
  $("button").click(function(){
  $("div.demo").scrollTop(30);
  });
  });
  </script>
  <style>
  div.demo {
  background:#CCCCCC none repeat scroll 0 0;
  border:3px solid #666666;
  margin:5px;
  padding:5px;
  position:relative;
  width:200px;
  height:100px;
  overflow:auto;
  }
  p { margin:10px;padding:5px;border:2px solid #666;width:1000px;height:1000px; }
  </style>
  </head>
  <body><button>Définir la scrollTop</button>
  <div class="demo"><h1>Le titre</h1><p>Bonjour le
  monde!!!!</p></div>
  </body>
  </html>



Par gerywa 25 juillet 2014



Voir aussi nos tutoriel :

Balise li

Définit un élément de liste

jQuery AJAX

jQuery AJAX

cryptocurrency Litecoin LTC Litecoin LTC

Tout savoir sur le Litecoin