Element : évènement scroll

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

En savoir plus
Voir la compatibilité complète

L'évènement scroll se déclenche lorsqu'un élément a été défilé. Pour détecter la fin du défilement, consultez l'évènement scrollend de Element.

Syntaxe

Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété de gestionnaire d'évènement.

addEventListener("scroll", (event) => { })

onscroll = (event) => { }

Les exemples suivants montrent comment utiliser l'évènement scroll avec un écouteur d'évènements et avec la propriété de gestionnaire d'évènement onscroll. La méthode setTimeout() est utilisée pour limiter le gestionnaire d'évènements, car les évènements scroll peuvent se déclencher à un rythme élevé. Pour des exemples supplémentaires utilisant requestAnimationFrame(), consultez la page de l'évènement scroll de l'interface Document scroll.

Utiliser `scroll` avec un écouteur d'évènements

L'exemple suivant montre comment utiliser l'évènement scroll pour détecter lorsque l'utilisateur·ice fait défiler le contenu d'un élément :

html

<div id="boite-defilante">
  <p>Défilez-moi&nbsp;!</p>
</div>
<p id="sortie">En attente des évènements de défilement...</p>

css

#boite-defilante {
  overflow: scroll;
  height: 100px;
  width: 100px;
  float: left;
}

#boite-defilante p {
  height: 200px;
  width: 200px;
}

#sortie {
  text-align: center;
}

const element = document.querySelector("div#boite-defilante");
const sortie = document.querySelector("p#sortie");

element.addEventListener("scroll", (event) => {
  sortie.textContent = "Évènement de défilement déclenché&nbsp;!";
  setTimeout(() => {
    sortie.textContent = "En attente des évènements de défilement...";
  }, 1000);
});

Utiliser la propriété de gestionnaire d'évènement `onscroll`

L'exemple suivant montre comment utiliser la propriété de gestionnaire d'évènement onscroll pour détecter lorsque l'utilisateur·ice fait défiler le contenu d'un élément :

html

<div id="boite-defilante-2">
  <p>Défilez-moi&nbsp;!</p>
</div>
<p id="sortie-2">En attente des évènements de défilement...</p>

css

#boite-defilante-2 {
  overflow: scroll;
  height: 100px;
  width: 100px;
  float: left;
}

#boite-defilante-2 p {
  height: 200px;
  width: 200px;
}

#sortie-2 {
  text-align: center;
}

const element = document.querySelector("div#boite-defilante-2");
const sortie = document.querySelector("p#sortie-2");

element.onscroll = (event) => {
  sortie.textContent = "Évènement de défilement déclenché&nbsp;!";
  setTimeout(() => {
    sortie.textContent = "En attente des évènements de défilement...";
  }, 1000);
};