Livre
Référence
Tutos
Scripts
Forums
FAQ
Tools
IA
TJS
Référence du JavaScript
HTMLElement
scrollTop
Propriété :
HTMLElement
.
scrollTop
Nombre de pixels de scroll vertical de l'élément
Syntaxe
Number HTMLElement.scrollTop
Compatible tous navigateurs
Oui
Oui
Oui
Oui
Oui
Oui
Oui
Description
Nombre de pixels de scroll vertical de l'élément HTML.
La propriété est accessible en écriture et permet de forcer le scroll par programmation.
Voir aussi
scrollLeft
pour le défilement horizontal.
Pour connaitre le scroll global de la page, utilisez
window.scrollX
et
window.scrollY
.
Exemple 1 : Scrolling dans les éléments HTML
Code source
<style
type=
"text/css"
>
div#container
{
padding
:
5
px
;
border
:
2
px
solid
#333
;
background
-color
:
#ccc
;
width
:
200
px
;
height
:
200
px
;
overflow
:
auto
;
}
div#mydiv p
{
margin
:
2
px
;
}
</style>
<div
id=
"container"
>
<div
id=
"mydiv"
>
<p>
Ligne 1
<p>
Ligne 2
<p>
Ligne 3
<p>
Ligne 4
<p>
Ligne 5
<p>
Ligne 6
<p>
Ligne 7
<p>
Ligne 8
<p>
Ligne 9
<p>
Ligne 10
</div>
</div>
<script
type=
"text/javascript"
>
var
vertical
=-
1
;
setInterval
(
function
()
{
if
(
document
.
getElementById
(
"container"
).
scrollTop
!=
vertical
)
{
vertical
=
document
.
getElementById
(
"container"
).
scrollTop
;
console
.
log
(
"div#container.scrollTop="
+
vertical
);
}
},
100
);
</script>
Résultat
Ligne 1
Ligne 2
Ligne 3
Ligne 4
Ligne 5
Ligne 6
Ligne 7
Ligne 8
Ligne 9
Ligne 10
Emulation de la console
Explication
Manipulation de scrolling d'un long
div#mydiv
dans
div#container
, formaté via CSS pour être scrollable et plus petit que son contenant.
Scrollez le div pour afficher la valeur de scrollTop.
Page en rapport
Introduction au DHTML
Page mise à jour le
18/02/2020
Troisième édition Tout JavaScript chez Dunod
En savoir plus
Sortie le 4 janvier 2023
Version papier 29€90
Format électronique 22€99.
Commandez en ligne
Dunod
Fnac
Amazon
Chercher une fonction, un objet, ...
Le graph des objets Javascript
Chargement
en cours...
Le 12/01/2025 23:05:24 sur php 7 en 31.42 ms