Détecter un élément visible à l’écran en JavaScript

Vous avez déjà scrollé une page et vu apparaître une animation pile au bon moment ? Ou chargé une image uniquement quand elle devient visible ? Derrière ces petits effets très agréables se cache une notion essentielle en javascript : savoir si un élément visible est réellement affiché à l’écran.

• Détecter si un élément est visible à l’écran et éviter les erreurs classiques
• Améliorer les performances et l’expérience utilisateur grâce à des techniques modernes en javascript
• Choisir la bonne méthode selon vos besoins pour créer des interactions dynamiques efficaces

Et justement, ce n’est pas aussi simple qu’on pourrait le croire. Entre la position dans la page, le scroll, le viewport… plusieurs méthodes existent, avec leurs avantages et leurs pièges. Dans ce tutoriel, vous allez apprendre à maîtriser tout ça pas à pas, avec des exemples concrets, simples et directement utilisables sur vos projets.

Pourquoi vérifier si un élément est visible ?

Avant de plonger dans le code, prenons deux secondes pour comprendre pourquoi c’est important. Imaginons que vous avez une page assez longue (comme un article du Créa-blog). Vous souhaitez :

• Déclencher une animation quand un bloc apparaît
• Charger une image uniquement quand elle devient visible (lazy loading)
• Suivre le comportement utilisateur (analytics)
• Mettre en surbrillance une section active

Dans tous ces cas, vous devez répondre à cette question :

Est-ce que mon élément est visible à l’écran ?

Et là… surprise : le navigateur ne vous donne pas directement cette info. Il faut la calculer.

Comprendre la notion de viewport

Avant d’aller plus loin, il faut comprendre un mot clé : viewport.

Le viewport, c’est simplement la zone visible de votre page dans le navigateur. Tout ce qui est en dehors nécessite un scroll. Pour imager simplement :

• Votre page = un long rouleau
• Le viewport = une fenêtre découpée dedans

Donc un élément visible en javascript, c’est un élément qui se trouve (totalement ou partiellement) dans cette fenêtre.

👉 Pour en savoir plus : Viewport et balise meta-viewport en HTML.

Première méthode : getBoundingClientRect()

C’est la méthode la plus classique, et honnêtement, c’est celle que vous devez connaître en premier.

Le principe

La fonction getBoundingClientRect() permet de récupérer la position d’un élément par rapport au viewport.

Voici un exemple simple :

const element = document.querySelector('#monElement');
const rect = element.getBoundingClientRect();
console.log(rect);

Vous allez obtenir un objet avec plusieurs propriétés :

• top
• bottom
• left
• right
• width
• height

Vérifier si un élément est visible

Maintenant, passons à la pratique, un élément est visible si :

• Son bas est sous le haut du viewport
• Son haut est au-dessus du bas du viewport

Traduction en code :

function isVisible(element) {
    const rect = element.getBoundingClientRect();    
    return (
        rect.top < window.innerHeight &&
        rect.bottom > 0
    );
}

Exemple concret

window.addEventListener('scroll', () => {
    const element = document.querySelector('#monElement');
    if (isVisible(element)) {
        console.log('L’élément est visible !');
    }
});

Ici, à chaque scroll, on vérifie si l’élément devient visible.

Vérifier si un élément est totalement visible

Attention : cette méthode considère un élément visible même s’il est partiellement affiché. Et parfois, ce n’est pas ce que vous voulez.

Si vous voulez être plus strict :

function isFullyVisible(element) {
    const rect = element.getBoundingClientRect();    
    return (
        rect.top >= 0 &&
        rect.bottom <= window.innerHeight
    );
}

Là, votre élément doit être entièrement dans le viewport.

Deuxième méthode : Intersection Observer, la méthode moderne

Alors là… on passe à un niveau supérieur. Si vous travaillez sur des projets modernes (et je sais que c’est votre cas), vous allez adorer cette méthode.

Contrairement à la méthode précédente :

• Pas besoin d’écouter le scroll en boucle
• Donc une meilleure performance
• Et un code plus propre

Exemple simple

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            console.log('L’élément est visible');
        }
    });
});
const element = document.querySelector('#monElement');
observer.observe(element);

• observer.observe(element) → on surveille l’élément
• entry.isIntersecting → devient vrai quand l’élément visible apparaît

Et surtout… le navigateur optimise tout pour vous.

Ajouter un seuil (threshold)

Vous pouvez décider quand l’élément est considéré visible.

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.intersectionRatio > 0.5) {
            console.log('Visible à 50%');
        }
    });
}, {
    threshold: 0.5
});

Dans le cas ci-dessus, l’élément doit être visible à 50%.

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Cas concret : animation au scroll

Voici un exemple très utilisé :

const elements = document.querySelectorAll('.fade-in');
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('visible');
        }
    });
});
elements.forEach(el => observer.observe(el));

Et en CSS :

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

Ainsi, vos éléments apparaissent en douceur.

👉 Pour en savoir plus, consultez notre tutoriel complet : IntersectionObserver, Animation d’élément à son apparition à l’écran

Différence entre les deux méthodes

Prenons un peu de recul.

getBoundingClientRect()

• Simple
• Facile à comprendre
• Mais nécessite du scroll listener
• Moins performant sur de longues pages

Intersection Observer

• Moderne
• Performant
• Automatique
• Un peu plus complexe à comprendre au début

Pour résumé, si vous débutez, commencez avec getBoundingClientRect()mais si vous voulez un site propre et optimisé, utilisez IntersectionObserver

Attention aux faux positifs

Parfois, un élément peut être « visible » techniquement… mais invisible pour l’utilisateur. Prenons les cas de :

• opacity: 0
• display: none
• visibility: hidden

Dans ce cas, vos méthodes javascript vont dire :

« Oui, il est visible »

… alors qu’en réalité, non.

Vérifier le style CSS

Vous pouvez ajouter une vérification :

function isReallyVisible(element) {
    const style = window.getComputedStyle(element);    
    return (
        style.display !== 'none' &&
        style.visibility !== 'hidden' &&
        style.opacity !== '0'
    );
}

Cas réel : lazy loading d’image

Voici un exemple concret que vous pouvez utiliser sur votre site :

const images = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            observer.unobserve(img);
        }
    });
});
images.forEach(img => observer.observe(img));

De cette façon, l’image se charge uniquement quand elle devient visible.

• Meilleure performance
• Meilleur SEO
• Meilleure expérience utilisateur

Cependant, ce n’est pas magique, attention au LCP avec le Lazy loading.

Optimisation : éviter les ralentissements

Si vous utilisez scroll, faites attention. Par exemple, ceci est un mauvaise pratique :

window.addEventListener('scroll', () => {
    // code lourd ici
});

Ça peut ralentir votre site.

Solution : throttle ou debounce

Exemple simple :

let ticking = false;
window.addEventListener('scroll', () => {
    if (!ticking) {
        window.requestAnimationFrame(() => {
            console.log('Scroll optimisé');
            ticking = false;
        });
        ticking = true;
    }
});

Petit conseil de pro et simple

Si vous deviez retenir une seule chose :

• Utilisez Intersection Observer dès que possible

C’est aujourd’hui la solution standard pour gérer un élément visible en javascript.

---

Vérifier si un élément est visible en javascript, ce n’est pas juste un détail technique. C’est une brique essentielle pour créer des interfaces modernes, fluides et agréables à utiliser.

Au début, vous allez peut-être tâtonner entre les différentes méthodes. C’est normal. Mais très vite, vous allez comprendre que chaque approche a son utilité, et surtout que maîtriser cette logique vous ouvre énormément de possibilités.

Et entre nous… le moment où votre première animation apparaît parfaitement au scroll, c’est assez satisfaisant. Presque magique.

Dans votre prochain projet, testez au moins une implémentation avec Intersection Observer. Vous verrez, votre code vous dira merci… et vos utilisateurs aussi.