Cette petite magie qui donne l'impression que le contenu ne s'arrête jamais, c'est ce qu'on appelle le scroll infini (ou infinite scroll).

C'est une technique étonnamment accessible. Elle améliore considérablement l'expérience utilisateur en supprimant le besoin de cliquer sur des pages "Suivant" et en rendant la navigation plus fluide et intuitive (surtout pour les réseaux sociaux).

Dans cet article, je vais vous expliquer pas à pas comment créer un effet de scroll infini avec du HTML, du CSS et du JavaScript pur et simple (sans Intersection Observer API). C'est parti !

Étape 1 : La structure de base en HTML

Il nous faut d'abord une structure HTML très simple. Nous avons besoin juste d'un conteneur qui accueillera nos éléments.

Créez un fichier index.html et copiez-y ce code :

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Rien de sorcier ici :

• Une <div> avec la classe container : qui est notre boîte principale.

• Quelques <div> avec la classe item à l'intérieur pour commencer.

On n'oublie pas de lier notre feuille de style style.css et notre fichier JavaScript app.js dans le projet.

Étape 2 : Un peu de style avec le CSS

Sur le CSS pas grand-chose, on veut simplement mettre un système de grille pour nos éléments. Pour ça, on va utiliser Flexbox.

Créez un fichier style.css et ajoutez-y ce qui suit :

.container {
   display: flex;
   flex-wrap: wrap; 
   justify-content: center;
   padding: 10px;
   max-width: 1200px;
   margin: 0 auto;
}

.item {
   width: 350px;
   height: 300px;
   background-color: #444;
   margin: 15px;
   border-radius: 12px;
   display: flex;
   justify-content: center;
   align-items: center;
}

Avec ce petit CSS, notre page a déjà meilleure allure. Le container centre les éléments et les items sont des cartes prêtes à être remplies de contenu. Ils peuvent par exemple faire un appel à une API (avec fetch) pour charger des articles, des photos ou des produits.

Étape 3 : La magie du JavaScript

C'est ici que du sérieux opère ! C'est le JavaScript qui va détecter quand l'utilisateur arrive en bas de la page pour charger de nouveaux éléments.

Créez votre fichier app.js et suivez ce guide.

A. Détecter le scroll de l'utilisateur

La première chose à faire sera d'écouter l'événement scroll sur la fenêtre. En gros, on demande au navigateur de nous prévenir chaque fois que l'utilisateur fait défiler sur sa page.

window.addEventListener('scroll', () => {});

B. Savoir quand on est "en bas"

Pour savoir si on a atteint le bas de la page, il nous faut trois éléments :

• scrollTop : C'est la distance en pixels en partant du haut de la page jusqu'à la partie visible à l'écran (donc uniquement le viewport de l’écran).

• clientHeight : Il va nous permettre de récupérer la hauteur de la partie visible de notre page (hauteur de la fenêtre du navigateur).

• scrollHeight : Lui, il englobe tout, c'est-à-dire la hauteur totale de la page, y compris la partie non visible.

Vous vous demandez sûrement : pourquoi toutes ces valeurs ? C'est pour comprendre que lorsque la somme de scrollTop et clientHeight est égale (ou presque) à scrollHeight, cela signifie que l'on a atteint le fond de la page !

window.addEventListener('scroll', () => {
    const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
    // Le +5 est une marge de sécurité pour d'autres navigateurs
    if (clientHeight + scrollTop >= scrollHeight - 5) {
        addArticles(6);
    }
});

Ici, on utilise une déstructuration { scrollTop, scrollHeight, clientHeight } pour récupérer ces trois valeurs d'un coup. C'est beaucoup plus propre, et c'est la meilleure manière de faire.

C. La fonction pour ajouter du contenu

C'est cette fonction qui sera chargée de créer et d’ajouter les nouveaux éléments dans notre container principale. Si on prend par exemple le cas d'un réseau social, ça peut être chaque post ou image qui sera chargé. Ici nous l'avons appelée addArticles.

const container = document.querySelector('.container');

const addArticles = (nombre) => {
   for (let i = 0; i < nombre; i++) {
      const newItem = document.createElement('div');
      newItem.classList.add('item');
      container.appendChild(newItem);
   }
};

Cette fonction, elle prend un nombre en argument. Ce qu'elle va faire, c'est boucler autant de fois et, à chaque tour :

• Créer une nouvelle <div>.

• Lui donner la classe item.

• L'ajouter comme enfant de notre container (qui englobe toutes les items).

Le code JavaScript final

Voici à quoi ressemblera notre fichier app.js :

const container = document.querySelector('.container');

const addArticles = (nombre) => {
   for (let i = 0; i < nombre; i++) {
      const newItem = document.createElement('div');
      newItem.classList.add('item');
      container.appendChild(newItem);
   }
};

// On écoute l'événement de scroll
window.addEventListener('scroll', () => {
   const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
   if (clientHeight + scrollTop >= scrollHeight - 5) {
      addArticles(6); // On charge 6 nouveaux articles
   }
});

En quelques lignes seulement, nous avons créé cet effet de scroll infini. C'est la base parfaite pour aller plus loin, même si à la place vous pouvez utiliser aussi Intersection Observer API pour refaire la même chose.

Eh bien aujourd’hui, on va parler d’URL, et je vais te décortiquer ça à la sauce dev : clair, imagé, et sans prise de tête. 😁

C’est quoi une URL ?

Une URL (Uniform Resource Locator), c’est l’adresse complète d’une ressource sur Internet.
Un peu comme le chemin vers un fichier… sauf qu’au lieu de pointer vers ton disque dur, ça vise des trucs sur des serveurs.

Structure d’une URL

Prenons cet exemple :

https://example.com:80/blog?search=test&sort_by=created_at#header

1. https:// — Le protocole

C’est la première partie de l’URL. Elle indique comment ton navigateur va communiquer avec le serveur.
Un peu comme choisir entre téléphoner 📞 ou envoyer un SMS 💬.

Quelques exemples :

• http : HyperText Transfer Protocol (le plus classique)

• https : version sécurisée avec chiffrement TLS 🔒

Depuis les années 2010, Google pousse au HTTPS : les sites non sécurisés sont moins bien référencés.

En bref : c’est le langage utilisé pour envoyer une requête et recevoir une réponse.
Un genre de fetch() universel.

2. example.com — Le domaine

C’est le nom du serveur qui héberge la ressource.
Comparable à un numéro de rue, mais version Internet.

Ce nom est traduit en adresse IP grâce au DNS (Domain Name System), le bottin du web.

Structure typique :

• Sous-domaine : www, blog, api

• Domaine principal : example, openai, google

• Extension (TLD) : .com, .fr, .io, .dev

const domaine = {
  sousDomaine: "www",
  nom: "example",
  extension: ".com"
};

3. :80 — Le port

Le port, c’est la porte d’entrée de la requête vers le serveur.

• 80 : par défaut pour http

• 443 : pour https

Souvent invisible, car les navigateurs les ajoutent automatiquement selon le protocole.

Mais si tu codes en Node.js ou Express, tu connais sûrement :

app.listen(3000);

4. /blog — Le chemin

Le chemin, c’est la route vers la ressource sur le serveur.
Comme les dossiers dans ton projet, mais côté serveur.

Plus il y a de /, plus tu descends dans l’arborescence.

Dans les frameworks modernes (Vue, React, Angular…), ce chemin est souvent géré par le router côté client.

5. ?search=test&sort_by=created_at — Les paramètres de requête

Après le ?, on trouve les informations envoyées au serveur via la méthode GET.

Structure : clé=valeur
Chaque paire est séparée par &.

Exemple :
?q=vuejs&page=2

En backend :

• Express.js : req.query

• PHP : $request->query()

6. #header — Le fragment (ou ancre)

Le fragment, c’est le petit # qui te téléporte dans la page.

Tu connais sûrement :

<a href="#section-3">Aller à la section 3</a>

Ça dit au navigateur : “scroll direct là-bas”.

URL absolue vs relative

Les URL, ce sont des chemins. Et il y a deux types :

URL absolue

Elle contient tout : protocole, domaine, chemin complet.

https://site.com/blog/article

URL relative

Elle dépend du contexte actuel (la page en cours, le niveau du dossier, etc.).

/blog/article           // relatif à la racine
../images/pic.jpg       // monte d’un dossier

En résumé

• Lire une URL → comprendre ce que fait ton navigateur

• Écrire une URL propre → améliorer la navigation, le SEO, l’accessibilité

Maîtriser les URL, c’est poser la première pierre d’un web solide.

Si tu as aimé ce genre de décryptage, n’hésite pas à me le dire ou à poser tes questions en commentaire ! 🚀