Zarządzanie adresami URL za pomocą interfejsu History API jest bardzo przydatne, a okazuje się, że jest to kluczowa funkcja dobrych aplikacji internetowych. Jedną z jego wad jest jednak to, że pozycje przewijania są zapisywane, a co ważniejsze, są przywracane podczas przeglądania historii. Często powoduje to brzydkie skoki, gdy pozycja przewijania zmienia się automatycznie, szczególnie wtedy, gdy aplikacja wykonuje przejścia lub w jakikolwiek sposób zmienia zawartość strony. Prowadzi to do negatywnego nastawienia użytkowników.
Co gorsza, nie możesz zrobić zbyt wiele. Chrome wywołuje zdarzenie popState przed zdarzeniem scroll. Oznacza to, że możesz odczytać bieżącą pozycję przewijania w elemencie popState, a następnie cofnąć ją w module obsługi zdarzeń scroll za pomocą funkcji window.scrollTo (ale przynajmniej to działa). Przeglądarka Firefox wywołuje jednak zdarzenie scroll przed popState, więc nie wiesz, jaka była stara wartość przewijania, aby ją przywrócić. Ba!
Dobra wiadomość jest jednak taka, że można to naprawić: history.scrollRestoration. Przyjmuje 2 wartości ciągu znaków: auto, która zachowuje obecną wartość (i jest jej wartością domyślną), oraz manual, co oznacza, że jako deweloper jesteś właścicielem wszystkich zmian przewijania, które mogą być wymagane, gdy użytkownik przegląda historię aplikacji. W razie potrzeby możesz śledzić pozycję przewijania podczas przekazywania wpisów historii za pomocą funkcji history.pushState().
Ta funkcja jest nowa i eksperymentalna (choć naprawdę niesamowita), więc zanim z niej skorzystasz, sprawdź, czy jest już dostępna:
if ('scrollRestoration' in history) {
// Back off, browser, I got this...
history.scrollRestoration = 'manual';
}
history.scrollRestoration znajdziesz w Chrome od wersji 46, a specyfikację znajdziesz tutaj.
Pamiętaj, by podzielić się z nami swoją opinią. Poinformuj innych dostawców, czy chcesz, by także obsługiwały scrollRestoration.