Angular 6.1.0 – Scroll behavior & ViewportScroller

Dzisiaj krótki art o świetnej funkcjonalności, która pojawiła się w nowej wersji Angulara 6.1.0-beta.1. Wielokrotnie irytowało mnie zachowanie scrolla w aplikacjach angularowych i w pewnych przypadkach niestety nie dało się obejść bez serwisu zarządzającego scrollem. Panowie z Angulara wpadli w końcu na genialny pomysł, aby scroll zachowywał się jak na scrolla przystało 😉

Problem scrolla

Wyobraź sobie sytuację, że chcesz przejść do widoku i od razu ustawić wysokość strony na odpowiedniej kotwicy. Przykład:

Template widoku A:

Template widoku B:

Na linku użyłem właściwość fragment, która doklei kotwicę do URLa po przejściu do widoku B:

Z racji, że div w widoku B ma margines górny ustawiony na 600px, to spodziewam się, że po przejściu na widok B, wartość scroll.Y ustawi się na 600px. Oczekuję również, że jak kliknę w przeglądarce strzałkę wstecz, to scroll wróci na pozycję Y o wartości 300px, no bo przeszedłem z widoku właśnie na takiej wysokości. Niestety tak się nie dzieje 🙁 Standardowo przeglądarka obsługuje takie zachowanie, ale w przypadku aplikacji SPA nie jest to już domyślna funkcjonalność.

AnchorScrolling & ScrollPositionRestoration to the rescue!

Od wresji 6.1.0 z pomocą przychodzą nam dwie nowe opcje dla konfiguracji Routera:

Konfigurację Routera możemy zmienić przekazując obiekt konfiguracyjny jako drugi parametr w metodzie forRoot.

Spójrzmy co mamy nowego do dyspozycjI:

  • anchorScrolling: ‚disabled’ | ‚enabled’  (domyślnie disabled)
  • scrollPositionRestoration: ‚disabled’ | ‚top’ | ‚enabled’ (domyślnie disabled)

W obu właściwościach disabled jest domyślny, ale to się zmieni w przyszłości na enabled. Wartość ‚top’ oznacza, aby po powrocie scrollować zawsze do [0, 0] czyli do góry strony.

ScrollPositionRestoration:  ‚enabled’ odpowiada za to, aby po powrocie do poprzedniej strony, scroll był na takiej pozycji, z której przyszliśmy.

Natomiast zmiana na ‚enabled’anchorScrolling zapewni nam, że po przejściu do URL z kotwicą, przeglądarka przeskoczy scrollem do odpowiedniej wysokości.

Sprawdziłem obie konfiguracje i działają naprawdę świetnie, już nie mogę się doczekać migracji do 6.1.0 :))

ViewportScroller

ViewportScroller to z kolei nowy serwis, który pozwoli nam korzystać z wartości scrolla. Na githubie pojawił się przykład:

COMMIT LINK Z PRZYKŁADAMI:  https://github.com/angular/angular/commit/49c5234

Także możemy teraz korzystać ze scrolla dla specyficznego komponentu oraz do ekipy RouterEvents dołączył nowy gracz: Scroll.

Scroll jest ostatnim eventem, wywołanym po NavigationEnd. Zachęcam do przejrzenia linka z commitem i zapoznania się z przykładami i kodem źródłowym. ViewportScroller po prostu opakowuje window.scrollTo w wygodne API. Natomiast nowy Scroll Event tak wygląda:

Jak widzisz, daje nam dostęp do takich właściwości jak pozycja scrolla i kotwicy.

Jeśli nie są znane Ci RouterEvents, to zachęcam do przeczytania artykułu:
http://www.angular.love/2017/06/17/angular-router-events-i-spinner/

Wkrótce Angular 6.1.0 wejdzie na rynek, na razie jest na etapie RC.0, ale warto pamiętać o tym nowym bajerze z ustawieniem scrolla!

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *