Événement onscroll

Événements DOM Objet Event

Définition et utilisation

L'événement onscroll se déclenche lorsque la barre de défilement de l'élément est déplacée.

Astuce :Utilisez CSS overflow Les propriétés de style créent une barre de défilement pour l'élément.

Exemple

Exemple 1

Exécutez JavaScript lors du défilement de l'élément <div> :

<div onscroll="myFunction()">

Essayez-le vous-même

Exemple 2

Changement entre les noms de classes à différentes positions de défilement - Lorsque l'utilisateur fait défiler de 50 pixels vers le bas depuis le sommet de la page, le nom de classe "test" est ajouté à l'élément (et est supprimé lors d'un défilement vers le haut).

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    else {
  }
    document.getElementById("myP").className = "";
  }
}

Essayez-le vous-même

Exemple 3

Lorsque l'utilisateur fait défiler de 350 pixels du haut vers le bas de la page, glisser l'élément (ajouter la classe slideUp) :

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
    document.getElementById("myImg").className = "slideUp";
  }
}

Essayez-le vous-même

Syntaxe

Dans HTML :

<element onscroll="myScript">

Essayez-le vous-même

Dans JavaScript :

object.onscroll = function(){myScript};

Essayez-le vous-même

Dans JavaScript, utilisez la méthode addEventListener() :

object.addEventListener("scroll", myScript);

Essayez-le vous-même

Remarque :Internet Explorer 8 ou versions antérieures ne prennent pas en charge Méthode addEventListener()。

Détails techniques

Bubbling : Non pris en charge
Annulable : Non pris en charge
Type d'événement : Si généré à partir de l'interface utilisateur,UiEvent。 Event。
Les balises HTML prises en charge : <address>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1> to <h6>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul>
Version DOM : Événements niveau 2

Support du navigateur

Événements Chrome IE Firefox Safari Opera
onscroll Support Support Support Support Support
Événements DOM Objet Event