Korzystanie z interfejsu History API do zarządzania adresami URL jest niesamowite, a jednocześnie stanowi kluczową funkcję dobrych aplikacji internetowych. Jedną z wad tego typu jest to, że informacje o miejscach przewijania są zapamiętywane i co ważniejsze – są przywracane za każdym razem, gdy przeglądasz historię. Często oznacza to brzydkie skoki, gdy pozycja przewijania zmienia się automatycznie, zwłaszcza gdy aplikacja zmienia się lub w jakikolwiek sposób zmienia zawartość strony. W ostatecznym rozrachunku taka sytuacja ma fatalne skutki dla użytkownika.
Aby jeszcze bardziej pogorszyć sytuację, niewiele możesz na to zrobić: Chrome wywołuje zdarzenie popState
przed zdarzeniem scroll
. Oznacza to, że możesz odczytać bieżącą pozycję przewijania w popState
, a potem cofnąć ją w module obsługi zdarzeń scroll
za pomocą polecenia window.scrollTo
(Ewww, ale przynajmniej działa). Firefox wywołuje jednak zdarzenie scroll
przed popState
, więc nie wiesz, jaka była stara wartość przewijania, by ją przywrócić. Ba!
Dobra wiadomość jest jednak taka, że można rozwiązać ten problem: history.scrollRestoration
. Przyjmuje ona 2 wartości ciągu: auto
(która zachowuje bieżący stan (i jest wartością domyślną)) oraz manual
(oznacza, że jako deweloper odpowiadasz za wszystkie zmiany przewijania, których mogą wymagać użytkownicy przeglądający historię aplikacji). W razie potrzeby możesz śledzić pozycję przewijania, przesyłając wpisy historii za pomocą funkcji history.pushState()
.
Ta funkcja jest nowa i eksperymentalna (chociaż całkiem nieźle działa), więc zanim z niej skorzystasz, sprawdź, czy jest dostępna:
if ('scrollRestoration' in history) {
// Back off, browser, I got this...
history.scrollRestoration = 'manual';
}
Aplikację history.scrollRestoration
znajdziesz w Chrome od wersji 46. Jej specyfikację znajdziesz tutaj.
Pamiętaj, aby podzielić się z nami swoją opinią i poinformować innych dostawców, czy chcesz, aby mogli obsługiwać usługę scrollRestoration
.