Obtenez la position de la barre de défilement avec JavaScript
- Qu’est-ce que la barre de défilement et la position de la barre de défilement
-
Obtenir la position de la barre de défilement à l’aide de l’objet
windowen JavaScript - Obtenir la position de la barre de défilement dans un élément en JavaScript
Dans ce tutoriel, nous expliquerons comment obtenir la position de la barre de défilement en JavaScript, et nous discuterons :
- Qu’est-ce que la barre de défilement et la position de la barre de défilement
- Comment obtenir la position de la barre de défilement à l’aide de l’objet
window - Comment obtenir la position de la barre de défilement à l’intérieur d’un élément
Qu’est-ce que la barre de défilement et la position de la barre de défilement
Une barre de forme rectangulaire se trouve généralement à l’extrémité inférieure ou à l’extrémité droite de la fenêtre du navigateur que l’utilisateur peut faire défiler, ce qui positionne en retour la zone de visualisation de l’utilisateur. De nombreux utilisateurs utilisent la barre de défilement quotidiennement car ils doivent faire défiler vers le haut et vers le bas sur presque toutes les pages Web pour afficher plus de contenu.
La barre de défilement est la position horizontale ou verticale de la zone de visualisation de la fenêtre, ce qui signifie combien l’utilisateur a fait défiler à partir de la gauche ou du haut. Par défaut, la position de défilement est 0px à partir de la gauche et 0px à partir du haut.
Obtenir la position de la barre de défilement à l’aide de l’objet window en JavaScript
Nous pouvons obtenir la position de la barre de défilement sur la fenêtre en utilisant l’objet window. L’objet window étant comme tout autre objet JavaScript, nous pouvons ajouter un EventListener pour écouter un événement scroll.
window.addEventListener('scroll', (event) => {
let scrollY = this.scrollY;
let scrollX = this.scrollX;
console.log(scrollY);
console.log(scrollX);
});
this dans ce contexte est appelé objet window. scrollY est une propriété de window qui nous indique le nombre de pixels dont la zone d’affichage de la fenêtre a fait l’objet depuis le haut. scrollX est une propriété de l’objet window qui nous indique combien l’utilisateur a fait défiler à partir de la gauche.
Obtenir la position de la barre de défilement dans un élément en JavaScript
Il existe certains scénarios où vous auriez besoin d’obtenir la position de défilement non pas de la fenêtre entière mais par rapport à un élément. Jetons un coup d’oeil à un exemple de faire cela.
<!DOCTYPE html>
<html>
<head>
<style>
#ContentContainer {
height: 250px;
width: 250px;
overflow: auto;
}
#content {
height: 500px;
width: 1000px;
background-color: red;
}
</style>
</head>
<body>
<div id="ContentContainer" onscroll="getScrollPoistion()">
<div id="content">Content to Scroll</div>
</div>
<script>
function getScrollPoistion() {
var ContainerElement = document.getElementById("ContentContainer");
var x = ContainerElement.scrollLeft;
var y = ContainerElement.scrollTop;
console.log(x); // scroll position from Left
console.log(y); // scroll position from top
}
</script>
</body>
</html>
Dans le segment de code ci-dessus, l’élément ayant le id de ContentContainer a une propriété de onscroll ; chaque fois qu’un utilisateur fait défiler l’élément, la fonction getScrollPosition est exécutée.
Ce que fait getScrollPosition, c’est qu’il prend le conteneur de l’élément de contenu, et il obtient la position où il a été défilé à partir de la gauche, puis il obtient la position de défilement à partir du haut.