Version insensible la casse de strstr
Découvrez comment utiliser l'attribut d'événement onscroll en HTML. Ce tutoriel vous guide à travers la définition, la syntaxe, les paramètres, les valeurs possibles, des exemples pratiques, et des astuces pour améliorer l'expérience de glisser-déposer dans vos projets Web.
L'attribut d'événement onscroll en HTML est utilisé pour définir une fonction JavaScript qui sera exécutée lorsque l'utilisateur fait défiler la page. Cela permet d'ajouter des fonctionnalités dynamiques en réponse au défilement de la page.
La syntaxe générale pour utiliser l'attribut onscroll est la suivante :
<element onscroll="maFonction()">
Où maFonction() est la fonction JavaScript que vous souhaitez exécuter lors du défilement de l'élément.
Aucun paramètre spécifique n'est passé à la fonction associée à onscroll. Cependant, la fonction peut accéder à des propriétés liées au défilement, telles que la position actuelle du défilement.
Exemple : 📋 Copier le code
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Exemple d'utilisation de l'attribut onscroll</title> <style> body { font-family: Arial, sans-serif; margin: 20px; height: 150vh; /* Ajout de hauteur pour permettre le défilement */ } #scrollMessage { display: none; position: fixed; top: 10px; left: 50%; transform: translateX(-50%); background-color: #3498db; color: #fff; padding: 10px; border-radius: 5px; opacity: 0.9; } </style> </head> <body> <header> <h1>Exemple d'utilisation de l'attribut onscroll</h1> <h2>Scroll pour voir l'effet</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at ligula nec quam varius luctus. Curabitur hendrerit nunc eu elit ultricies, ut vulputate mi convallis. Donec eget felis at metus blandit ultrices in a dui.</p> <div id="scrollMessage">Vous avez fait défiler la page!</div> <script> // Fonction à exécuter lors du défilement function afficherMessage() { // Affiche le message document.getElementById("scrollMessage").style.display = "block"; // Désactive l'événement onscroll après son déclenchement pour éviter la répétition du message window.onscroll = null; } // Associe la fonction à l'événement onscroll window.onscroll = afficherMessage; </script> </body> </html>
Cet attribut d'événement est pris en charge dans tous les principaux navigateurs.