oujood.com

Tutoriel sur l'attribut d'événement onscroll en HTML

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.

chercher |

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()">

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

Internet Explorer FirefoxOpera Google ChromeSafari
Cet attribut d'événement est pris en charge dans tous les principaux navigateurs.


 Retour à la Liste attribut d'événement 

    
Accueil du site




Voir aussi nos tutoriel :

Liste des propriétés css

Aide mémoire : Référence des Propriétés de CSS...

Texte et typographie de Bootstrap Typographie

Bootstrap définit des styles et le formatage de contenu de texte par default comme les titres, paragraphes, blocs de citation, etc

traitement des espaces de noms

Traitement des espaces de noms