Configuration du comportement de défilement
scrollBehavior(to, from, savedPosition), défilement fluide, défilement jusqu’à l’ancre et restauration de la position
Configuration du comportement de défilement est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.
Contrôler le défilement lors de la navigation
Dans une application monopage, la page ne se recharge pas : le navigateur ne réinitialise donc pas le défilement. La fonction scrollBehavior de Vue Router vous permet de choisir la position de défilement après chaque navigation.
Où la définir
Passez scrollBehavior lors de la création du routeur. La fonction s’exécute à chaque navigation.
const router = createRouter({
history: createWebHistory(),
routes,
scrollBehavior(to, from, savedPosition) {
// return a position
}
})Les trois paramètres
Elle reçoit to (la route cible), from (la route actuelle) et savedPosition. Ce dernier n’est pas nul uniquement lorsque vous naviguez avec les boutons Précédent/Suivant du navigateur.
Revenir en haut pour les nouvelles routes
Le comportement le plus simple consiste à revenir en haut chaque fois que l’utilisateur accède à une nouvelle page.
scrollBehavior(to, from, savedPosition) {
return { top: 0 }
}Restaurer la position lors du retour
Lorsque savedPosition existe, renvoyez-le afin que le bouton Précédent ramène l’utilisateur exactement à l’endroit où il se trouvait, comme dans le comportement natif du navigateur.
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
}
return { top: 0 }
}Pourquoi savedPosition est important
Sans restaurer savedPosition, le bouton Précédent ramènerait l’utilisateur en haut d’une longue liste qu’il avait parcourue. Renvoyer cette valeur préserve sa position.
Faire défiler jusqu’à une ancre
Si l’URL cible contient une ancre comme #section, faites défiler jusqu’à cet élément en renvoyant un sélecteur el.
scrollBehavior(to) {
if (to.hash) {
return { el: to.hash }
}
return { top: 0 }
}Défilement fluide
Ajoutez behavior: 'smooth' pour animer le défilement au lieu de changer instantanément de position.
scrollBehavior(to) {
if (to.hash) {
return { el: to.hash, behavior: 'smooth' }
}
}Compenser la hauteur d’un en-tête fixe
Un en-tête fixé peut recouvrir l’ancre cible. Ajoutez top comme décalage afin que l’élément apparaisse sous l’en-tête.
scrollBehavior(to) {
if (to.hash) {
return { el: to.hash, top: 80 }
}
}Différer le défilement
Si le contenu se charge de manière asynchrone, renvoyez une Promise qui se résout avec la position après un délai, afin que la cible existe au moment du défilement.
scrollBehavior(to, from, savedPosition) {
return new Promise((resolve) => {
setTimeout(() => resolve({ top: 0 }), 300)
})
}Combiner les règles
Un gestionnaire complet donne la priorité à la position enregistrée, puis aux ancres de l’URL, et revient enfin en haut par défaut.
scrollBehavior(to, from, savedPosition) {
if (savedPosition) return savedPosition
if (to.hash) return { el: to.hash, behavior: 'smooth' }
return { top: 0 }
}Vérification rapide
Vérifiez vos connaissances sur le comportement du défilement.
Récapitulatif
scrollBehavior contrôle le défilement lors de la navigation :
- Il reçoit to, from et savedPosition.
- Renvoyez savedPosition pour restaurer la position du bouton Précédent.
- Renvoyez { el: to.hash } pour faire défiler jusqu’à une ancre.
- Renvoyez { top: 0 } lors d’une nouvelle navigation vers une route.
Questions Fréquemment Posées
La leçon « Configuration du comportement de défilement » est-elle gratuite ?
Oui — le texte complet de « Configuration du comportement de défilement » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Configuration du comportement de défilement » ?
scrollBehavior(to, from, savedPosition), défilement fluide, défilement jusqu’à l’ancre et restauration de la position Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Vue Academy ?
Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Configuration du comportement de défilement » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?
Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Champs meta des routes et typage
- Transitions et animations des routes
- Configuration du comportement de défilement
- Navigation programmatique et useRouter