history.replaceState () не работает с history.scrollRestoration = 'auto' в Svelte / Sapper

Я использую history.replaceState() для обновления параметров запроса моей страницы, не вызывая перезагрузки страницы, как это предлагается в этом ответе SO.

function setQueryParam ({ name, value }) {
  const params = new URLSearchParams(window.location.search)

  params.set(name, value)
  history.replaceState({}, '', decodeURIComponent(`${window.location.pathname}?${params}`))
}

Я также сохраняю позицию прокрутки пользователя со следующей строкой:

history.scrollRestoration = 'auto'

При переходе с одной страницы на другую scrollRestoration работает нормально - положение прокрутки сохраняется между страницами. Однако после я изменяю параметры запроса с помощью функции setQueryParam, восстановление прокрутки больше не работает.

Почему это происходит?

Примечание. тот же код отлично работает за пределами Svelte / Sapper, используя только HTML и JavaScript.


person Yulian    schedule 10.06.2020    source источник


Ответы (1)


Как клиентский маршрутизатор, Sapper должен в значительной степени перехватить управление прокруткой и восстановление, чтобы имитировать поведение, которое вы обычно получаете, когда полностью перезагружаете браузер при каждом изменении страницы.

Для этого // notice the first argument history.replaceState(history.state, '', decodeURIComponent(`${window.location.pathname}?${params}`))

Я не думаю, что history.scrollRestoration действительно имеет какое-либо влияние на Sapper.

person rixo    schedule 11.06.2020
comment
Я не думаю, что history.scrollRestoration действительно влияет на Sapper. - это так, потому что, если я не заменяю состояние, позиция прокрутки сохраняется. - person Yulian; 11.06.2020
comment
Но разве он будет вести себя иначе, если вы измените значение history.scrollRestauration? Я имею в виду, что не думаю, что Sapper учитывает эту опцию при управлении / восстановлении прокрутки, которую он реализует. Вы пробовали передать history.state? - person rixo; 11.06.2020
comment
Вы правы, я удалил history.scrollRestauration = 'auto', и он по-прежнему сохраняет позицию прокрутки. Более того, я попытался указать history.state в качестве первого параметра в replaceState(), и теперь все работает, как ожидалось. Однако есть две странные вещи, во-первых, я подумал, что history.state - это просто объект JSON, определенный пользователем, но, очевидно, в нем есть личная информация, или Sapper использует ее за кулисами. Во-вторых, я попробовал то же самое в другом своем проекте, и все работало нормально, даже без прохождения history.state. В любом случае, большое спасибо за ваш ответ! - person Yulian; 11.06.2020
comment
Вы правы насчет history.state, к нему не привязано поведение браузера по умолчанию. Я не углублялся в код, но почти уверен, что Саппер что-то в него вставляет. В вашем другом проекте тоже использовался Sapper? Потому что можно хранить данные истории без history.state, и в этом случае replaceState не повлияет на функциональность. - person rixo; 11.06.2020
comment
Да, я намеренно пробовал работать с другим проектом, в котором используются те же версии Svelte и Sapper. В любом случае, еще раз большое спасибо! Вы сэкономили мне массу времени! - person Yulian; 11.06.2020