Vue Academy · Lekcja

Konfiguracja zachowania przewijania

scrollBehavior(to, from, savedPosition), płynne przewijanie, przewijanie do kotwicy oraz przywracanie pozycji.

Konfiguracja zachowania przewijania to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Kontrolowanie przewijania podczas nawigacji

W aplikacji jednostronicowej strona nie jest ponownie ładowana, więc przeglądarka nie resetuje przewijania. Funkcja scrollBehavior Vue Router pozwala określić miejsce przewinięcia strony po każdej nawigacji.

Gdzie to umieścić

Parametr scrollBehavior należy przekazać podczas tworzenia routera. Funkcja jest uruchamiana przy każdej nawigacji.

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    // return a position
  }
})

Trzy parametry

Funkcja otrzymuje to (docelową trasę), from (bieżącą trasę) oraz savedPosition. Ostatni parametr ma wartość inną niż null tylko podczas nawigowania za pomocą przycisków Wstecz/Dalej przeglądarki.

Przewijanie do góry dla nowych tras

Najprostsze zachowanie polega na przewinięciu do góry za każdym razem, gdy użytkownik przechodzi na nową stronę.

scrollBehavior(to, from, savedPosition) {
  return { top: 0 }
}

Przywracanie pozycji podczas cofania

Gdy istnieje savedPosition, należy ją zwrócić, aby przycisk Wstecz przenosił użytkownika dokładnie w miejsce, w którym się znajdował — zgodnie z natywnym działaniem przeglądarki.

scrollBehavior(to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  }
  return { top: 0 }
}

Dlaczego savedPosition ma znaczenie

Bez przywrócenia savedPosition naciśnięcie przycisku Wstecz przeniosłoby użytkownika na początek długiej listy, którą wcześniej przewijał. Zwrócenie tej wartości zachowuje poprzednią pozycję.

Przewijanie do kotwicy

Jeśli docelowy adres URL zawiera fragment, taki jak #section, należy przewinąć do tego elementu, zwracając selektor el.

scrollBehavior(to) {
  if (to.hash) {
    return { el: to.hash }
  }
  return { top: 0 }
}

Płynne przewijanie

Należy dodać behavior: 'smooth', aby animować przewijanie zamiast natychmiast zmieniać pozycję.

scrollBehavior(to) {
  if (to.hash) {
    return { el: to.hash, behavior: 'smooth' }
  }
}

Uwzględnianie stałego nagłówka

Przyklejony nagłówek może zasłaniać kotwicę docelową. Należy dodać top jako przesunięcie, aby element znalazł się poniżej nagłówka.

scrollBehavior(to) {
  if (to.hash) {
    return { el: to.hash, top: 80 }
  }
}

Opóźnianie przewijania

Jeśli zawartość ładuje się asynchronicznie, należy zwrócić Promise, który po opóźnieniu rozwiąże się pozycją, aby element docelowy istniał w momencie rozpoczęcia przewijania.

scrollBehavior(to, from, savedPosition) {
  return new Promise((resolve) => {
    setTimeout(() => resolve({ top: 0 }), 300)
  })
}

Łączenie reguł

Kompletny moduł obsługi najpierw uwzględnia zapisaną pozycję, następnie kotwice z fragmentu adresu, a na końcu domyślnie przewija do góry.

scrollBehavior(to, from, savedPosition) {
  if (savedPosition) return savedPosition
  if (to.hash) return { el: to.hash, behavior: 'smooth' }
  return { top: 0 }
}

Szybki test

Proszę sprawdzić wiedzę na temat zachowania przewijania.

Podsumowanie

scrollBehavior steruje przewijaniem podczas nawigacji:

Otrzymuje to, from oraz savedPosition.
Należy zwrócić savedPosition, aby przywrócić pozycję po użyciu przycisku Wstecz.
Należy zwrócić { el: to.hash }, aby przewinąć do kotwicy.
Należy zwrócić { top: 0 } podczas przechodzenia do nowych tras.

Często zadawane pytania

Czy lekcja „Konfiguracja zachowania przewijania” jest bezpłatna?

Tak — pełny tekst „Konfiguracja zachowania przewijania” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Konfiguracja zachowania przewijania”?

scrollBehavior(to, from, savedPosition), płynne przewijanie, przewijanie do kotwicy oraz przywracanie pozycji. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Konfiguracja zachowania przewijania”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Vue Academy