Définit le texte qui doit être stylistiquement différent de texte normal
Méthode ScrollLeft() & scrollTop() pour retourner,définir ou régler position horizontale ou verticale de la bar de défilement Scrollbar
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.
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>
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>
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.
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é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>