OUJOOD.COM
Guide de l'attribut onscroll en HTML : Définition
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.
Syntaxe générale
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.
Paramètres
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>
Astuces et conseils d'utilisation
- Évitez d'attacher trop d'événements onscroll pour optimiser les performances.
- Utilisez judicieusement l'événement onscroll pour des effets visuels agréables ou pour charger des données supplémentaires à mesure que l'utilisateur fait défiler.
- Testez votre implémentation sur différents navigateurs pour assurer une compatibilité maximale.
Appui de navigateur
Cet attribut d'événement est pris en charge dans tous les principaux navigateurs.