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

search |

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()

Sélectionner 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
Sélectionner 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.

Sélectionner 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.

Sélectionner 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

Trafic Booster
hebergement web

SCREEBER - Logiciel de copywriting

SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent


HTML5, CSS3, JavaScript pour débutants Tome 1
HTML5, CSS3, JavaScript
pour débutants Tome 1

Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

Regarder aussi nos cours :

La fonction rtrim

Supprime les espaces (ou d'autres caractères) de fin de chaîne

Balise ligne horiontalle hr

Définit un changement dans le contenu thématique

Effet de style en css

Effet de style mettre un texte en gras et|ou en italique...



Rentabilisez efficacement votre site

Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci