Défilement JavaScript
Comprendre les événements et techniques de défilement en JavaScript
Les événements de défilement dans JavaScript permettent aux développeurs d'interagir avec le défilement d'une page web. Cela peut être extrêmement utile pour des fonctionnalités telles que l'effet parallaxe, le déclenchement d'animations en fonction de la position de défilement, la mise en œuvre d'un défilement infini, ou même la modification dynamique du style des éléments au fur et à mesure que l'utilisateur fait défiler la page. Ce guide explorera comment utiliser JavaScript pour gérer les événements de défilement et fournira des exemples pratiques pour démontrer des techniques efficaces.
Événement de défilement JavaScript
L'événement scroll est déclenché lorsque la vue du document ou un élément a été défilé. C'est l'un des événements les plus fréquemment utilisés sur les pages web pour des effets dynamiques et des designs interactifs.
Concepts clés :
- Fréquence de l'événement : L'événement
scrollpeut se déclencher à un rythme élevé, ce qui fait que le code du gestionnaire d'événements s'exécute très souvent. Cela peut entraîner des problèmes de performance, il est donc courant de débourrer (debounce) ou de limiter le débit (throttle) de ces événements. En production, enveloppez l'écouteur dans une fonction debounce ou throttle pour limiter la fréquence d'exécution. Par exemple :
function debounce(func, wait) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
}
window.addEventListener('scroll', debounce(() => {
// handle scroll logic here
}, 100));- Défilement de
windowvs.element: Vous pouvez écouter les événements de défilement sur la fenêtre entière ou sur des éléments spécifiques défilables.
Exemples pratiques de gestion des événements de défilement
Exemple 1 : Afficher/Masquer la navigation au défilement
Cet exemple montre comment masquer une barre de navigation lors du défilement vers le bas et l'afficher lors du défilement vers le haut, ce qui est un motif courant sur de nombreux sites web modernes pour maximiser l'espace d'affichage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Scroll Event Navigation Example</title>
<style>
#navbar {
position: fixed;
top: 0;
width: 100%;
background-color: #333;
color: white;
text-align: center;
padding: 10px;
transition: top 0.3s;
}
body {
padding: 0;
margin: 0;
height: 1500px; /* to ensure scrolling */
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<p style="display: flex; justify-content: center; align-items: center; margin-top: 50vh;"><strong>When you scroll down, the navigation bar disappears. Scroll back up, and it reappears!</strong></p>
<div id="navbar">Navigation Bar</div>
<script>
let lastScrollTop = 0;
window.addEventListener(
"scroll",
function () {
let currentScroll = window.pageYOffset || document.documentElement.scrollTop;
if (currentScroll > lastScrollTop) {
document.getElementById("navbar").style.top = "-50px"; // Adjust based on nav height
} else {
document.getElementById("navbar").style.top = "0px";
}
lastScrollTop = currentScroll <= 0 ? 0 : currentScroll; // For Mobile or negative scrolling
},
false
);
</script>
</body>
</html>Explication :
- Le script suit la dernière position de défilement et la compare à la position actuelle. Si la position actuelle est plus élevée, cela signifie que l'utilisateur fait défiler vers le bas, donc la barre de navigation est masquée en ajustant sa position supérieure hors de l'écran.
- Lors du défilement vers le haut, la barre de navigation réapparaît.
Exemple 2 : Déclenchement d'animation au défilement
Cet exemple montre comment déclencher des animations lorsque des éléments entrent dans la zone visible (viewport) lors d'un défilement.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Scroll Animation Trigger</title>
<style>
.box {
width: 100px;
height: 100px;
background: red;
opacity: 0;
transition: opacity 2s;
margin: 600px auto; /* Ensures it starts out of view */
}
</style>
</head>
<body>
<p>Keep scrolling down to see the animation!</p>
<div class="box"></div>
<script>
let hasAnimated = false;
window.addEventListener('scroll', function() {
const box = document.querySelector('.box');
const rect = box.getBoundingClientRect();
if (rect.top < window.innerHeight && !hasAnimated) {
box.style.opacity = 1; // Fade in the box when it comes into view
hasAnimated = true;
}
});
</script>
</body>
</html>Explication :
- Vérification de visibilité : Le script vérifie si le haut de l'élément
.boxse trouve dans la zone visible et modifie son opacité à 1, déclenchant un effet de fondu. Un indicateur (flag) empêche l'animation de se déclencher à nouveau lors des événements de défilement suivants.
Exemple 3 : Effet de défilement parallaxe
Cet exemple démontre un simple effet parallaxe où l'image de fond se déplace à une vitesse différente du contenu au premier plan lorsque vous faites défiler la page vers le bas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Enhanced Parallax Scrolling</title>
<style>
body, html {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
overflow-x: hidden; /* Prevent horizontal scroll */
}
.parallax {
height: 100vh; /* Full height of the viewport */
position: relative;
background: url('https://via.placeholder.com/1920x1080') no-repeat center center;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 36px;
letter-spacing: 1px;
}
.content {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: white;
color: #333;
font-size: 24px;
padding: 0 20px;
text-align: center;
box-sizing: border-box;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="content">Scroll down to see the parallax effect!</div>
<div class="parallax">Stunning Parallax!</div>
<div class="content">Keep scrolling to see more effects.</div>
<div class="parallax"></div>
<div class="content">You have reached the end. Amazing, right?</div>
<script>
document.addEventListener('scroll', function() {
document.querySelectorAll('.parallax').forEach(function(el) {
const factor = 0.5; // Change this for more or less parallax
const offset = window.pageYOffset * factor - 300; // Adjusts the starting position of background
el.style.backgroundPositionY = offset + 'px';
});
});
</script>
</body>
</html>Explication :
Styles CSS :
- La classe
.parallaxdéfinit l'image de fond pour qu'elle remplisse le conteneur et la positionne au centre. L'exemple repose entièrement sur JavaScript pour le positionnement, évitant ainsibackground-attachment: fixeden CSS qui peut causer des problèmes de performance sur les appareils mobiles.
- La classe
Fonctionnalité JavaScript :
- Lors du défilement, le script calcule une nouvelle position verticale pour l'image de fond en fonction du décalage de défilement.
- En ajustant dynamiquement
backgroundPositionY, l'image se déplace à un rythme différent du contenu de la page, créant l'effet de profondeur parallaxe.
En résumé, lorsque vous faites défiler cette page web, vous verrez les images de fond se déplacer plus lentement que le texte, créant un effet visuel agréable qui donne l'impression que les images se trouvent à une profondeur différente.
Conclusion
Gérer efficacement les événements de défilement est une compétence cruciale pour les développeurs web, permettant de créer des sites plus interactifs et optimisés en termes de performances. Que vous implémentiez des améliorations de l'interface utilisateur comme des barres de navigation dynamiques ou que vous utilisiez un effet parallaxe sur votre page, comprendre et gérer correctement le défilement en JavaScript peut considérablement améliorer l'expérience utilisateur.
Pratique
Quelles actions sont des utilisations appropriées de l'événement de défilement JavaScript dans le développement web ?