@sgsbes

Как восстановить позицию скролла?

Есть проблема, которая связана с восстановлением скролла.

Есть главная страница и там есть карточки товаров. Я нажимаю на карточку товара, которая расположена по центру страницы. Дальше перехожу на страницу именно товара и там есть кнопка "назад". Когда я кликаю на кнопку "назад" я хочу, чтобы при переходе назад, страница была уже по центру (или там, где распологается карточка товара, по которой я кликнул).

Сейчас использую в next.config.js: scrollRestoration: true

Восстановление скролла действительно работает, только когда я кликаю назад или свайпаю именно от функционала браузера. Тогда да, все работает хорошо, но условный код:

router.push(appPathEnum.home, undefined, { scroll: false })

Не работает должным образом, хотя по документации scroll и должен отключать сценарий прокрутки вверх. Сейчас, он как раз таки и по клику на кнопку "назад" игнорирует позицию скролла, которую next записывает в sessionStorage.

Немного почитав документацию и проблемы в гите:
- https://github.com/vercel/next.js/issues/57258
- https://github.com/vercel/next.js/discussions/47781

Понял, что в документации описано неверно про scrollRestoration. и никакие флаги scroll: false не будут работать (будут работать, но исходя из нового положения скролла), так как при переходе через Link или router.push, Next будет записывать новое положение скролла

Получается, что сценарий такой.
- При клике на карточку товара где-то по центру экрана, все записывается в sessionStorage
- При клике на кнопку "назад" на карточке товара уже записывается новое положение скролла в sessionStorage

Возможно есть какие-то варианты отключения сохранения скролла? Можно конечно писать свои решения, но обычно всякие работы с скроллом ведут к каким-то интересным сайд-эффектам :(

P.S router.back() работает хорошо, он по истории браузера возвращается назад, но это заведомо плохой вариант, так как если на странице карточки товара изменим язык или каким-то иным образом преобразим URL, то будет работать не правильно
  • Вопрос задан
  • 57 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы