Autoscroll : Maîtrisez le Défilement Fluide sur Votre Site

Introduction

Parfois, capturer une simple page web peut se transformer en un défi technique. Pour mon travail, j’avais besoin d’enregistrer un défilement fluide de 15 secondes sur notre site web (avec OBS studio). Comme je suis un flemmard, Exit le scroll manuel ! J’ai trouvé la solution idéale grâce à ChatGPT (on ne va pas se mentir, je n'ai malheureusement pas de temps à perdre sur une fonctionnalité gadget comme celle-ci), que j’ai ensuite améliorée pour répondre à mes besoins précis. Dans cet article, on va décortiquer cette fonction, explorer ses subtilités, et découvrir comment l’intégrer à vos projets web pour un défilement automatique tout en douceur.

Le code final en détail :

// Fonction qui gère le défilement par étapes
function scrollStep(maxScroll, stepSize, delay) {
    const currentScroll = window.scrollY; // Position actuelle du défilement
    const windowHeight = window.innerHeight; // Hauteur de la fenêtre du navigateur

    if (currentScroll < maxScroll) {
        // Défiler par un pourcentage de la hauteur de la fenêtre, basé sur le stepSize
        window.scrollBy(0, windowHeight * stepSize);

        // Continuer le processus avec un délai
        setTimeout(() => scrollStep(maxScroll, stepSize, delay), delay);
    }
}

// Fonction principale pour démarrer le défilement en douceur
function smoothScroll(stepSize = 0.1, delay = 100) {
    const scrollHeight = document.documentElement.scrollHeight; // Hauteur totale du document
    const windowHeight = window.innerHeight; // Hauteur de la fenêtre du navigateur
    const maxScroll = scrollHeight - windowHeight; // Distance totale à défiler

    // Démarrer le processus de défilement
    scrollStep(maxScroll, stepSize, delay);
}

// Vous pouvez maintenant contrôler le stepSize (e.g., 0.1 pour 10%) et le délai (en millisecondes)
smoothScroll(0.05, 200); // Défilement de 5% par étape, délai de 200ms entre les étapes

Décomposition du Code

Voici les deux fonctions clés de notre implémentation : scrollStep et smoothScroll.

Fonction scrollStep

La fonction scrollStep gère le processus de défilement par étapes. Elle prend trois paramètres :

• maxScroll : La distance maximale à défiler.

• stepSize : Le pourcentage de la hauteur de la fenêtre à défiler à chaque étape.

• delay : Le délai entre chaque étape de défilement.

Explication du Fonctionnement

1. Récupération des Informations de Défilement : La fonction commence par récupérer la position actuelle du défilement (currentScroll) et la hauteur de la fenêtre (windowHeight).

2. Condition de Défilement : Si la position actuelle est inférieure à maxScroll, le défilement est effectué. La fonction window.scrollBy permet de défiler d'un certain nombre de pixels, calculé ici comme un pourcentage de la hauteur de la fenêtre.

3. Recurser le Défilement : Utilisation de setTimeout pour rappeler la fonction scrollStep après un certain délai, créant ainsi un effet de défilement progressif.

Fonction smoothScroll

La fonction smoothScroll est le point d'entrée pour démarrer le défilement doux. Elle calcule les paramètres nécessaires avant d'appeler scrollStep.

Détails de l'Implémentation

1. Calcul des Hauteurs : La hauteur totale du document (scrollHeight) et la hauteur de la fenêtre sont calculées pour déterminer la distance maximale à défiler.

2. Appel à scrollStep : La fonction scrollStep est appelée avec les valeurs calculées, initiant ainsi le processus de défilement.

Utilisation

Pour utiliser ce code, il suffit d'appeler la fonction smoothScroll avec les paramètres souhaités pour stepSize (le pourcentage de défilement) et delay (le délai en millisecondes). Par exemple, pour faire défiler la page de 5% toutes les 200 millisecondes, on peut écrire :

smoothScroll(0.05, 200); // Défilement de 5% par étape, délai de 200ms entre les étapes

Voici les valeurs que j'ai utilisées pour mon besoin que j'avais énoncé en intro : smoothScroll(0.05, 10);. Les valeurs sont réglées très bas, car j'avais besoin d'un scroll fluide et rapide. Descendre plus bas que cela peut entrainer des saccades gênantes.

Pour les guitaristes parmi vous, le site Ultimate Guitar propose une fonctionnalité d'autoscroll très pratique. Elle permet de jouer tout en suivant en temps réel les tablatures et les paroles qui défilent. Fini les pauses pour scroller à chaque fois que tu joues 15 secondes.

Une solution un cran au dessus

Si tu veux gagner du temps pro max, il existe des outils d'IA qui te permettent de générer du code rapidement et efficacement. Par exemple, grâce au site Websim AI, j'ai pu obtenir un scroll fluide similaire en seulement quelques lignes (moins de cinq minutes), sans avoir à écrire une seule ligne de code. C’est une solution pratique, surtout quand on manque de temps :

Cependant, il est important de nuancer cela : je pense qu'il est fondamental de savoir comment faire par soi-même avant de se tourner vers ces outils. Les solutions générées par l'IA sont pratiques, mais comprendre les bases et les concepts derrière le code te permettra de mieux personnaliser, déboguer et optimiser ton travail. Une fois que tu as cette maîtrise, ces outils deviennent un atout supplémentaire pour gagner du temps, sans pour autant négliger la qualité du résultat.

Conclusion

Ce code fournit une solution simple et efficace pour implémenter un défilement doux par étapes dans une application web. En ajustant les paramètres de stepSize et de delay, vous pouvez personnaliser l'expérience de défilement pour répondre aux besoins de vos projets. Il y a énormément de cas d'utilisation, je vous fais confiance sur ce point-là. Merci d'avoir pris le temps de lire cet article jusqu'à la fin ! J'espère qu'il vous a été utile et inspirant. Restez à l'affût pour de nouveaux contenus passionnants à venir. À très bientôt !