History API – przywracanie przewijania

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.