Как восстановить позицию скролла после обновления компонента Vue?

Question

[AleDv]

Всем привет, есть Vue компонент-контейнер, в котором меняются панели с контентом. Контент Может быть разной длинны, поэтому сохраняю позицию скролла для каждой панели, при переходе на другую.

При возвращении на посещённую панель пытаюсь вернуть позицию скрола в хуке updated, однако позиция скролла не восстанавливается. Если же, добавить таймаут перед вызовом функции установки скролла, то скролл устаналивается, но происходит моргание экрана, т.к. сначала отображается верх панели, а потом скроллится до нужного места.

updated() {
            setTimeout(() => {
                this.manageScroll();
            }, 1);
        },

Если я правильно понял хук updated, то когда он срабатывает, у нас уже есть полностью построенный DOM, но тогда почему скролл не устаналивается? Подскажите, пожалуйста, где я ошибся?

P.S. скролл ставлю так:

window.scrollTo(0, sessionStorage[key]);

Comments

[Aetae]

$nextTick вместо setTimeout?

Answer 1

[Роман Ямчук]

Если вы используете VueRouter, то можно сохранять позицию скролла в истории

Comments

[AleDv]

Нет, роутер не использую. id текущей панели и состояние храню в Vuex

[Роман Ямчук]

Тогда возможно вам стоит смотреть в сторону keep-alive, удалось найти такой компонент, но не удалось найти демо.

[AleDv]

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

[Роман Ямчук]

AleDv, судя по исходникам на github это скорее директива, чем компонент