Tailles de fenêtre et défilement en JavaScript

Comprendre les dimensions de la fenêtre et le comportement du défilement est essentiel pour créer des interfaces web réactives. Cet article explique comment mesurer le viewport (la zone visible de la page), comment lire la taille complète du document, comment savoir jusqu'où la page a défilé, et comment faire défiler par programmation — y compris le défilement fluide et le défilement vers un élément. Chaque concept est accompagné d'un exemple exécutable.

La distinction essentielle à garder à l'esprit : le viewport correspond à ce que l'utilisateur voit actuellement, tandis que le document représente la page entière, dont la majeure partie peut être hors de la zone visible.

Mesurer le viewport (fenêtre visible)

Le viewport est le rectangle de la page que l'utilisateur voit à un instant donné. Il existe deux façons de lire sa taille, et la différence est importante.

document.documentElement.clientWidth / clientHeight — la largeur et la hauteur du viewport sans la barre de défilement. C'est le bon choix lorsque vous avez besoin de la surface réelle disponible pour le contenu.
window.innerWidth / innerHeight — l'intérieur complet de la fenêtre incluant la largeur de la barre de défilement. Pratique pour des vérifications rapides, mais peut être quelques pixels plus grand que clientWidth lorsqu'une barre de défilement est présente.

Utilisez clientWidth/clientHeight pour les calculs de mise en page (par exemple, centrer un élément) ; utilisez innerWidth/innerHeight pour des vérifications de type point de rupture où quelques pixels n'ont pas d'importance.

// Viewport size excluding the scrollbar (recommended for layout)
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);

// Window interior including the scrollbar
console.log(window.innerWidth);
console.log(window.innerHeight);

L'exemple suivant affiche la taille du viewport en temps réel et se met à jour à chaque redimensionnement de la fenêtre.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Window Size Display</title>
</head>
<body>
    <div id="window-info"></div>
    <script>
        function displayWindowSize() {
            const w = document.documentElement.clientWidth;
            const h = document.documentElement.clientHeight;
            document.getElementById('window-info').innerHTML =
                'Viewport width: ' + w + 'px<br>' +
                'Viewport height: ' + h + 'px';
        }
        window.addEventListener('resize', displayWindowSize);
        window.addEventListener('load', displayWindowSize);
    </script>
</body>
</html>

Essayez vous-même »

Mesurer la taille complète du document

Pour obtenir la hauteur de la page entière — y compris la partie défilée hors de la vue — lisez les propriétés scroll* de l'élément document. En raison d'incohérences historiques entre les navigateurs, la méthode fiable consiste à prendre le maximum de plusieurs mesures :

const scrollHeight = Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.body.clientHeight, document.documentElement.clientHeight
);
console.log('Full document height: ' + scrollHeight);

C'est exactement la valeur dont vous avez besoin pour construire une barre de progression, un déclencheur de défilement infini (« suis-je près du bas ? »), ou un bouton « défiler vers le bas ». scrollWidth fonctionne de la même façon pour le débordement horizontal.

Lire la position de défilement actuelle

Pour savoir jusqu'où la page a été défilée, utilisez :

window.scrollX — décalage de défilement horizontal en pixels (également appelé window.pageXOffset, un ancien alias).
window.scrollY — décalage de défilement vertical en pixels (alias window.pageYOffset).

scrollX/scrollY sont les noms modernes ; pageXOffset/pageYOffset sont identiques et toujours pris en charge pour la compatibilité ascendante.

console.log(window.scrollX); // same as window.pageXOffset
console.log(window.scrollY); // same as window.pageYOffset

Faire défiler par programmation

L'objet window expose trois méthodes pour déplacer la page vous-même.

window.scrollTo(x, y) — défile vers une position absolue. scrollTo(0, 0) revient en haut.
window.scrollBy(dx, dy) — défile relativement à la position actuelle. scrollBy(0, 100) descend de 100 px depuis l'endroit où vous vous trouvez.
element.scrollIntoView() — défile pour rendre un élément spécifique visible.

Les trois acceptent un objet d'options avec behavior: 'smooth' pour un défilement animé au lieu d'un saut instantané :

// Smoothly scroll back to the top of the page
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });

// Nudge the page down by one viewport height
window.scrollBy({ top: window.innerHeight, behavior: 'smooth' });

Défilement fluide vers un élément

scrollIntoView est le moyen le plus simple de sauter vers une section — par exemple, un bouton « retour en haut » ou « aller aux commentaires ». Passer { behavior: 'smooth' } anime le mouvement :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Smooth Scrolling</title>
</head>
<body>
    <button onclick="document.getElementById('target').scrollIntoView({ behavior: 'smooth' });">Go to Target</button>
    <div style="height: 2000px;">
        <div id="target" style="margin-top: 1800px;">Target Element</div>
    </div>
</body>
</html>

Essayez vous-même »

Suivre la position de défilement

Créez des effets dynamiques basés sur la position de défilement de l'utilisateur. L'exemple ci-dessous met à jour un élément fixe pour afficher le décalage de défilement vertical actuel à chaque événement scroll.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Scroll Position Detector</title>
</head>
<body>
    <div style="height: 3000px;">
      <div style="position: fixed;">Scroll position: <span id="position">0</span>px</div>
    </div>
    <script>
        const positionSpan = document.getElementById('position');
        window.addEventListener('scroll', function() {
            positionSpan.innerHTML = window.scrollY;
        });
    </script>
</body>
</html>

Essayez vous-même »

Remarque : pour une meilleure compatibilité avec les navigateurs, document.documentElement.scrollTop peut être utilisé comme solution de repli pour window.scrollY.

Trouver la position d'un élément avec getBoundingClientRect

element.getBoundingClientRect() retourne la taille d'un élément et sa position relative au viewport (et non au document). L'objet retourné possède les propriétés top, bottom, left, right, width et height.

Comme les valeurs sont relatives au viewport, elles changent au fur et à mesure que vous défilez. Pour convertir la position d'un élément en coordonnées du document, ajoutez le décalage de défilement actuel :

const box = element.getBoundingClientRect();

// Distance from the top of the viewport (changes while scrolling)
console.log(box.top);

// Distance from the top of the whole document (stable)
const documentTop = box.top + window.scrollY;
console.log(documentTop);

Un usage courant consiste à vérifier si un élément est actuellement visible à l'écran :

function isInViewport(el) {
  const r = el.getBoundingClientRect();
  return r.top >= 0 &&
         r.bottom <= document.documentElement.clientHeight;
}

Pour un examen approfondi de la différence entre les coordonnées du viewport et celles du document, consultez Coordonnées JavaScript.

Personnaliser les barres de défilement pour améliorer l'esthétique

Les barres de défilement personnalisées peuvent rehausser l'attrait visuel de votre site web :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Custom Scrollbars</title>
    <style>
        body {
            height: 2000px; /* For demonstration */
        }
        /* Custom scrollbar styling */
        ::-webkit-scrollbar {
            width: 12px;
        }
        ::-webkit-scrollbar-track {
            background: darkblue;
        }
        ::-webkit-scrollbar-thumb {
            background-color: lightgreen;
            border-radius: 10px;
            border: 3px solid darkcyan;
        }
    </style>
</head>
<body>
    Scroll to see the custom scrollbar!
</body>
</html>

Essayez vous-même »

Dans cet exemple, nous avons utilisé des pseudo-éléments pour sélectionner et styliser différentes parties de la barre de défilement. Voici un aperçu de chaque propriété CSS utilisée :

::-webkit-scrollbar : Ce pseudo-élément cible la barre de défilement elle-même. Nous avons défini sa largeur à 12 pixels, ce qui détermine l'épaisseur de la barre de défilement.
::-webkit-scrollbar-track : Ce pseudo-élément représente la piste (ou le sillon) dans laquelle le curseur de la barre de défilement se déplace. Nous l'avons stylisé avec un fond bleu foncé. Les couleurs utilisées ici sont choisies pour vous montrer la différence entre chaque partie de la barre de défilement. Des couleurs plus subtiles sont recommandées pour une application réelle.
::-webkit-scrollbar-thumb : Ce pseudo-élément cible la partie déplaçable de la barre de défilement, appelée le curseur. Nous avons choisi un vert clair pour le curseur, le faisant ressortir sur la piste pour une meilleure visibilité. La propriété border-radius: 10px applique des coins arrondis au curseur, lui donnant un aspect moderne et élégant. Une bordure de 3 pixels solide en cyan foncé est également utilisée.

Remarque : les pseudo-éléments ::-webkit-scrollbar sont spécifiques aux navigateurs basés sur Chromium. Pour Firefox et les normes modernes, envisagez d'utiliser les propriétés CSS scrollbar-width et scrollbar-color. Exemple : scrollbar-width: thin; scrollbar-color: lightgreen darkblue;

Conclusion

En maîtrisant les techniques de dimensionnement de fenêtre et de défilement en JavaScript, vous pouvez grandement améliorer l'expérience utilisateur et la réactivité de vos projets web. Retenez la distinction fondamentale — clientWidth/clientHeight mesurent le viewport visible, les propriétés scroll* mesurent le document complet, et scrollX/scrollY (alias pageXOffset/pageYOffset) vous indiquent jusqu'où vous avez défilé. Utilisez scrollTo, scrollBy et scrollIntoView avec behavior: 'smooth' pour déplacer la page vous-même.

Pour continuer, explorez :

Défilement JavaScript — événements et patterns pour réagir au défilement.
Coordonnées JavaScript — systèmes de coordonnées du viewport et du document en profondeur.
Travailler avec les styles dans le DOM — lire et modifier les styles des éléments, y compris les dimensions abordées ici.

Pratique

Quelles méthodes peuvent être utilisées pour mesurer les tailles et les défilements en JavaScript ?

window.innerWidth/innerHeightdocument.clientTop/clientLeftdocument.documentElement.clientWidth/clientHeightwindow.scrollX/scrollYwindow.documentBody.scrollWidth