Использование History API для управления вашими URL-адресами — это здорово и, как оказалось, это важнейшая функция хороших веб-приложений. Однако одним из его недостатков является то, что позиции прокрутки сохраняются, а затем, что более важно, восстанавливаются всякий раз, когда вы просматриваете историю. Это часто означает неприглядные скачки при автоматическом изменении положения прокрутки, особенно если ваше приложение выполняет переходы или каким-либо образом меняет содержимое страницы. В конечном итоге это приводит к ужасному пользовательскому опыту.
Что еще хуже, вы мало что можете с этим поделать: Chrome запускает событие popState перед событием scroll , что означает, что вы можете прочитать текущую позицию прокрутки в popState , а затем отменить ее в обработчике событий scroll с помощью window.scrollTo (Фуууу). , но, по крайней мере, это работает!). Firefox, однако, запускает событие scroll до popState , поэтому вы не знаете, каким было старое значение прокрутки, чтобы его восстановить. Ба!
Однако хорошей новостью является то, что есть потенциальное решение: history.scrollRestoration . Он принимает два строковых значения: auto , который сохраняет все как есть (и является его значением по умолчанию), и manual , что означает, что вы, как разработчик, берете на себя ответственность за любые изменения прокрутки, которые могут потребоваться, когда пользователь перемещается по приложению. история. Если вам нужно, вы можете отслеживать положение прокрутки при добавлении записей истории с помощью history.pushState() .
Эта функция новая и экспериментальная (хотя и совершенно потрясающая), поэтому обязательно проверьте ее доступность перед использованием:
if ('scrollRestoration' in history) {
// Back off, browser, I got this...
history.scrollRestoration = 'manual';
}
Вы найдете history.scrollRestoration в Chrome 46 и более поздних версиях, а его спецификацию можно найти здесь .
Не забудьте оставить нам отзыв и сообщить другим поставщикам, хотите ли вы, чтобы они также поддерживали scrollRestoration .