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

Question

[Руслан Абсалямов]

Как сделать автоскроллинг в самый низ, в модальном окне, если компонент подгружается через v-if. Он не доконца спускается в модальном окне, а спускается в самый низ самого тектса.
И второй вопрос, если у меня в реальном проекте при таком коде не спускается никак, потому что идет погрузка через вкладки и используется keep-alive. Так как в документации описано про динамические компоненты.
Но по сути как я думаю, что

document.getElementById("conteiner").scrollTop = 300;

должен же спускаться в самый низ, если высота блока 300 px и даже при 1000 px не работает
Вот пример модального окна со автоскроллингом https://codesandbox.io/s/2opz6rrnyr

Answer 1

[0xD34F]

Во-первых - никаких 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

Comments

[Руслан Абсалямов]

еще не пробовал, не за компьюетром сижу.
на счет keep-alive вот пример из документации https://jsfiddle.net/chrisvfritz/Lp20op9o/
То есть скролл находиться в самом компоненте tab-posts