Configurazione del comportamento di scorrimento
scrollBehavior(to, from, savedPosition), scorrimento fluido, scorrimento all'hash, ripristino della posizione.
Configurazione del comportamento di scorrimento è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.
Controllare lo scorrimento durante la navigazione
In una single-page app la pagina non viene ricaricata, quindi il browser non reimposta automaticamente lo scorrimento. La funzione scrollBehavior di Vue Router consente di decidere dove scorrere la pagina dopo ogni navigazione.
Dove si trova
Passi scrollBehavior quando crea il router. La funzione viene eseguita a ogni navigazione.
const router = createRouter({
history: createWebHistory(),
routes,
scrollBehavior(to, from, savedPosition) {
// return a position
}
})I tre parametri
Riceve to (la route di destinazione), from (la route corrente) e savedPosition. Quest'ultimo non è null solo quando si naviga tramite i pulsanti Indietro/Avanti del browser.
Scorrere in cima per le nuove route
Il comportamento più semplice consiste nello scorrere in cima ogni volta che l'utente passa a una nuova pagina.
scrollBehavior(to, from, savedPosition) {
return { top: 0 }
}Ripristinare la posizione tornando indietro
Quando esiste savedPosition, lo restituisca affinché il pulsante Indietro riporti l'utente esattamente nel punto in cui si trovava, come in un browser nativo.
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
}
return { top: 0 }
}Perché savedPosition è importante
Senza ripristinare savedPosition, premendo Indietro l'utente si ritroverebbe in cima a un lungo elenco che aveva fatto scorrere. Restituendolo, la sua posizione viene conservata.
Scorrere fino a un'ancora
Se l'URL di destinazione contiene un hash come #section, faccia scorrere la pagina fino a quell'elemento restituendo un selettore el.
scrollBehavior(to) {
if (to.hash) {
return { el: to.hash }
}
return { top: 0 }
}Scorrimento fluido
Aggiunga behavior: 'smooth' per animare lo scorrimento invece di spostarsi istantaneamente.
scrollBehavior(to) {
if (to.hash) {
return { el: to.hash, behavior: 'smooth' }
}
}Compensare un'intestazione fissa
Un'intestazione fissa può coprire l'ancora di destinazione. Aggiunga top come offset, così l'elemento si posiziona sotto l'intestazione.
scrollBehavior(to) {
if (to.hash) {
return { el: to.hash, top: 80 }
}
}Ritardare lo scorrimento
Se il contenuto viene caricato in modo asincrono, restituisca una Promise che si risolve con la posizione dopo un ritardo, in modo che l'elemento di destinazione esista quando viene eseguito lo scorrimento.
scrollBehavior(to, from, savedPosition) {
return new Promise((resolve) => {
setTimeout(() => resolve({ top: 0 }), 300)
})
}Combinare le regole
Un gestore completo dà la precedenza alla posizione salvata, poi alle ancore indicate dall'hash e infine torna all'inizio della pagina.
scrollBehavior(to, from, savedPosition) {
if (savedPosition) return savedPosition
if (to.hash) return { el: to.hash, behavior: 'smooth' }
return { top: 0 }
}Verifica rapida
Verifichi la Sua conoscenza del comportamento dello scorrimento.
Riepilogo
scrollBehavior controlla lo scorrimento durante la navigazione:
- Riceve to, from e savedPosition.
- Restituisca savedPosition per ripristinare la posizione del pulsante Indietro.
- Restituisca { el: to.hash } per scorrere fino a un'ancora.
- Restituisca { top: 0 } per le nuove navigazioni verso altre route.
Domande Frequenti
La lezione «Configurazione del comportamento di scorrimento» è gratuita?
Sì — il testo completo di «Configurazione del comportamento di scorrimento» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.
Cosa imparerò in «Configurazione del comportamento di scorrimento»?
scrollBehavior(to, from, savedPosition), scorrimento fluido, scorrimento all'hash, ripristino della posizione. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Vue Academy?
Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Configurazione del comportamento di scorrimento»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Vue Academy?
Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Campi meta delle route e tipizzazione
- Transizioni e animazioni delle route
- Configurazione del comportamento di scorrimento
- Navigazione programmatica e useRouter