Обрабатывать window.scrollTo на svelte на одной странице приложения - PullRequest
Новая
       47

Обрабатывать window.scrollTo на svelte на одной странице приложения

0 голосов
/ 25 марта 2020

Как я могу go в позиции окна после обновления на моем примере Repl? Когда я прокручиваю вниз, нажимаю на карточку и go возвращаюсь в главное окно, она всегда прыгает наверх. Я попытался вставить window.scrollTo на afterupdate, а также beforeupdate, внутри OpenCard.svelte также внутри App.svelte, но я не могу понять это. Что было бы лучшим решением для этого?

Repl

1 Ответ

2 голосов
/ 26 марта 2020

Существует более одного решения для этого , потому что это довольно много кода для такого вопроса.

одним из решений было бы добавить эту строку в ваш showHome функция 

function showHome() {
    visible = true;
    requestAnimationFrame(() => window.scrollTo(0,100)); // That's the line
  }

КАК ЭТО РАБОТАЕТ:

Причина, по которой это решение работает, состоит в том, что вы ставите все приложение в переменную visible, поэтому после установки visible = true; приложение еще не обновлено, и поэтому вызов window.scrollTo немедленно приведет к прокрутке до ссылки sh. таким образом, размещение его внутри requestAnimationFrame будет ждать следующего перерисовки DOM, делая прокрутку только после обновления DOM.

Другое решение все равно потребует requestAnimationFrame, нет избегая его использования. Для этого потребуется создать реактивный оператор, подобный следующему: 

$: if (visible) requestAnimationFrame(() => window.scrollTo(0,100));

Таким образом, ваше приложение всегда будет знать, когда следует изменить прокрутку на основе значения переменной visible.

Я думаю, что вы следует go со вторым решением, он более стабилен при будущих изменениях.

Чтобы узнать больше о requestAnimationFrame и о том, как его использовать: https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame

...