Как мне в модальном окне сделать прокрутку вниз?

Как сделать автоскроллинг в самый низ, в модальном окне, если компонент подгружается через v-if. Он не доконца спускается в модальном окне, а спускается в самый низ самого тектса.
И второй вопрос, если у меня в реальном проекте при таком коде не спускается никак, потому что идет погрузка через вкладки и используется keep-alive. Так как в документации описано про динамические компоненты.
Но по сути как я думаю, что
document.getElementById("conteiner").scrollTop = 300;
должен же спускаться в самый низ, если высота блока 300 px и даже при 1000 px не работает
Вот пример модального окна со автоскроллингом https://codesandbox.io/s/2opz6rrnyr
  • Вопрос задан
  • 159 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Во-первых - никаких getElementById, ставьте ref на интересующий вас элемент.

Во-вторых - если вам надо сделать прокрутку в самый низ, не надо указывать какое-то определённое число. У элемента есть свойство scrollHeight.

Во-третьих - надо дождаться, пока будет показан дополнительный контент, и только потом выполнять прокрутку, т.е., используйте nextTick:

this.$nextTick(() => {
  const el = this.$refs.container;
  el.scrollTop = el.scrollHeight;
});

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

Информации примерно 0. Что за вкладки, где используется keep-alive... Ничего непонятно.

Если в keep-alive завёрнуто ваше окно, то выполняйте проверку this.show и прокрутку (можно вынести этот код в отдельный метод, чтобы не дублировать) и в хуке activated.

UPD. https://codesandbox.io/s/vue-template-ow505
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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