~5 min de lecture
Comment j'ai Saboté Mon Scroll comme un débutant (Et ce que j'ai appris)
Tu sais, ces bugs qui te rendent fou parce que TOUT semble correct ? Hier, j'en ai vécu un.
Laisse-moi te raconter comment un simple overflow-y: auto a ruiné ma journée.
🎬 Acte 1 : "Mais Pourquoi Ça Ne Marche Pas ?!"
La scène
Je bosse sur mon site. Design soigné, fond avec des gradients animés, tout est fluide. Je suis content du résultat.
Je teste la navigation entre les pages.
Et là... rien.
La page change. Le contenu s'affiche. Mais je reste scotché au milieu de la page.
Je scroll manuellement vers le haut. Je clique sur un autre lien. Pareil. Je reste bloqué en plein milieu.
Mon premier réflexe
"C'est sûrement un oubli de config du Router."
J'ouvre app.config.ts :
export const appConfig: ApplicationConfig = {
providers: [
provideRouter(
routes,
withInMemoryScrolling({
anchorScrolling: 'enabled',
scrollPositionRestoration: 'top' // ✅ C'est bien là
})
)
]
};
Tout est nickel. La config est correcte.
Je rafraîchis. Je teste. Toujours bloqué en plein milieu.
L'irritation monte
Je commence à m'énerver. Pas contre le code. Contre moi.
Parce que je sais que ça devrait fonctionner. C'est basique. C'est dans tous les tutoriels.
Alors pourquoi ça ne marche pas chez moi ?
🔍 Acte 2 : La Traque Du Bug
"C'est peut-être le CSS"
Je commence à inspecter le HTML.
<body class="min-h-screen flex flex-col">
<app-root></app-root>
</body>
Rien de suspect. Un body classique.
J'inspecte app-root :
app-root {
display: block;
overflow-y: auto; /* 🤔 Tiens... */
}
Overflow-y: auto.
Je me dis : "Ah, c'est sûrement pour gérer le scroll correctement avec mon fond fixe."
Je laisse tomber cette piste. Grave erreur.
Les tentatives désespérées
Je teste tout :
❌ Changer scrollPositionRestoration en 'enabled'
❌ Retirer anchorScrolling
❌ Ajouter des ViewportScroller manuels
❌ Mettre des window.scrollTo(0, 0) partout
Rien ne fonctionne.
À ce stade, je commence à douter. "C'est peut-être un bug du Router ?"
Spoiler : ce n'était pas un bug du Router.
💡 Acte 3 : Le Moment "AHA!"
Je fais le point avec Claude Code
Là, je suis à bout. Ça fait 2 heures que je tourne en rond.
J'ouvre Claude Code dans mon terminal :
claude-code "Mon Angular Router ne scroll pas en haut après navigation, pourtant scrollPositionRestoration est bien configuré"
Claude analyse le projet. Il me demande de voir la config du Router. Puis les styles de app-root.
Et là, il me dit :
"Je vois que vous avez
overflow-y: autosur:hostdans app.component.ts. C'est probablement ça le problème. Angular Router scrollewindow, pas un container custom."
BOOM.
Ça fait tilt.
Mon overflow-y: auto sur app-root... c'est ÇA le problème.
Pourquoi ?
Angular Router fait ça :
// Simplifié
window.scrollTo(0, 0);
Mais dans mon cas, l'élément scrollable, ce n'est pas window.
C'est app-root.
Alors le Router scrolle window (qui ne bouge pas), et moi je reste bloqué dans app-root.
Le test décisif
Je commente la ligne :
app-root {
display: block;
/* overflow-y: auto; */
}
Je teste.
ÇA MARCHE.
Le scroll revient en haut. Automatiquement. À chaque navigation.
Je souffle. Enfin.
🛠️ Acte 4 : La Solution Complète
Mais attend... mon fond !
Problème : j'avais mis overflow-y: auto sur app-root pour une raison.
Mon fond avec des pseudo-éléments ::before et ::after en position: absolute défilait avec le scroll.
Je voulais qu'il reste fixe.
La vraie solution
1. Retirer l'overflow du composant
// app.component.ts
@Component({
selector: 'app-root',
styles: [`
:host {
display: block;
/* Plus d'overflow */
}
`]
})
export class App {
}
2. Fixer les effets visuels correctement
/* styles.css */
body {
min-height: 100dvh;
background: var(--gradient-mesh-premium);
background-attachment: fixed; /* ✅ Fond fixe */
}
body::before {
position: fixed; /* ✅ Pas absolute */
inset: 0;
z-index: -2;
/* Gradients, orbes, etc. */
}
body::after {
position: fixed; /* ✅ Pas absolute */
inset: 0;
z-index: -1;
/* Grille, effets, etc. */
}
3. Simplifier le HTML
<!-- Avant -->
<body class="min-h-screen flex flex-col">
<app-root></app-root>
</body>
<!-- Après -->
<body class="min-h-screen">
<app-root></app-root>
</body>
Le résultat
✅ Le fond reste visuellement fixe
✅ Le Router contrôle le scroll correctement
✅ scrollPositionRestoration: 'top' fonctionne
✅ Les ancres avec fragments fonctionnent
✅ Les effets visuels restent en place
Tout marche. Enfin.
🎓 Acte 5 : Ce Que J'ai Appris
Leçon #1 : Angular Router est têtu
Angular Router veut absolument scroller window ou document.
Si tu donnes l'overflow à un autre élément, le Router s'en fout. Il continue de scroller window.
Résultat : ça ne marche pas.
La règle d'or : Ne jamais mettre overflow sur un composant Angular si tu veux que le Router gère le scroll.
Leçon #2 : position: fixed vs absolute
Je confondais les deux.
position: absolute :
- Positionné par rapport au parent
- Scroll avec la page
position: fixed :
- Positionné par rapport au viewport
- Reste fixe pendant le scroll
Pour des effets de fond qui doivent rester immobiles, c'est fixed qu'il faut.
Leçon #3 : background-attachment
Une propriété CSS méconnue mais puissante :
body {
background-attachment: fixed;
}
Ça permet de garder un background totalement immobile pendant le scroll.
Parfait pour les designs avec des fonds élaborés.
Leçon #4 : Hiérarchie du scroll
Dans une SPA Angular :
Le scroll DOIT rester au niveau du document.
Sinon :
- Le Router ne contrôle plus rien
- Les ancres ne fonctionnent plus
- Les animations de scroll buguent
- Tu te prends la tête pendant 2 heures
💭 Conclusion : L'Auto-Sabotage
Ce bug, je me le suis infligé moi-même.
Pas de bug Angular. Pas de bug du navigateur.
Juste moi, qui ai voulu faire un overflow-y: auto au mauvais endroit.
Maintenant, à chaque fois que je vois un problème de scroll dans Angular, je vérifie en premier s'il n'y a pas un overflow qui traîne quelque part.
PS : Merci à PapyDev qui m'a remonté le bug 🫶🏼.
Envie de découvrir EasyAngularKit et son programme ?
→ Découvre EasyAngularKit : https://pim.ms/C31g7p2