History API – przywracanie przewijania

Korzystanie z interfejsu History API do zarządzania adresami URL jest świetną i bardzo ważną funkcją dobrych aplikacji internetowych. Jednym z mankamentów jest to, że pozycje przewijania są przechowywane, a co ważniejsze, przywracane, gdy przewijasz historię. Często powoduje to nieestetyczne przeskakiwanie, gdy pozycja przewijania zmienia się automatycznie, zwłaszcza jeśli aplikacja przechodzi w inny stan lub zmienia zawartość strony w jakikolwiek sposób. W konsekwencji użytkownicy nie będą zadowoleni.

Co gorsza, nie można tego zrobić w żaden sposób: Chrome uruchamia zdarzenie popState przed zdarzeniem scroll, co oznacza, że możesz odczytać bieżącą pozycję przewijania w funkcji popState, a potem odwrócić ją w obiekcie scroll za pomocą funkcji window.scrollTo (nieprzyjemne, ale przynajmniej działa). Firefox uruchamia jednak zdarzenie scroll przed popState, więc nie wiesz, jaka była stara wartość przewijania, aby ją przywrócić. Bah!

Dobra wiadomość jest jednak taka, że istnieje potencjalne rozwiązanie: history.scrollRestoration. Akceptuje 2 wartości ciągu znaków: auto, która zachowuje wszystko w obecnej postaci (i jest wartością domyślną), oraz manual, co oznacza, że Ty jako deweloper przejmiesz prawo własności do wszelkich zmian przewijania, które mogą być wymagane, gdy użytkownik przegląda historię aplikacji. W razie potrzeby możesz śledzić pozycję przewijania podczas przesyłania wpisów historii za pomocą history.pushState().

Ta funkcja jest nowa i eksperymentalna (choć naprawdę świetna), więc zanim z niej skorzystasz, sprawdź, czy jest dostępna:

if ('scrollRestoration' in history) {
    // Back off, browser, I got this...
    history.scrollRestoration = 'manual';
}

history.scrollRestoration znajdziesz w wersji Chrome 46 i później. Specyfikację znajdziesz tutaj.

Nie zapomnij zostawić nam opinii i poinformować innych dostawców, że chcesz, aby oni też obsługiwali scrollRestoration.