Прокрутите в конец div с помощью Vue.js

У меня есть компонент Vue с несколькими элементами в нем. Я хочу автоматически прокручивать нижнюю часть этого элемента при вызове метода в компоненте (в основном, делать то же самое, что и в прокручивать до нижней части div?). Однако я не нашел способ получить элемент внутри моего компонента и изменить scrolTop

В настоящее время я использую Vue 2.0.8

Ответ 1

Как я понял, желаемый эффект, который вы хотите, это прокрутить до конца списка (или прокручиваемого div), когда что-то произойдет (например: элемент добавлен в список). Если это так, вы можете прокрутить до конца элемента контейнера (или даже самой страницы), используя только чистые Javascript и селектора VueJS.

var container = this.$el.querySelector("#container");
container.scrollTop = container.scrollHeight;

Я привел рабочий пример в этой скрипте: https://jsfiddle.net/my54bhwn

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

Надеюсь, что это поможет вам.

Ответ 2

Я попробовал принятое решение, и это не сработало для меня. Я использую отладчик браузера и обнаруживаю, что фактическая высота, которую следует использовать, - это clientHeight НО, которую вы должны поместить в трюк updated() для работы всего решения.

data(){
return {
  conversation: [
    {
    }
  ]
 },
mounted(){
 EventBus.$on('msg-ctr--push-msg-in-conversation', textMsg => {
  this.conversation.push(textMsg)
  // Didn't work doing scroll here
 })
},
updated(){              <=== PUT IT HERE !!
  var elem = this.$el
  elem.scrollTop = elem.clientHeight;
},

Ответ 3

Вот простой пример с использованием #ref для прокрутки до нижней части div.

/*
Defined somewhere:
  var vueContent = new Vue({
      el: '#vue-content',
      ...
 */

var messageDisplay = vueContent.$refs.messageDisplay;
messageDisplay.scrollTop = messageDisplay.scrollHeight;

<div id='vue-content'>
  <div ref='messageDisplay' id='messages'>
    <div v-for="message in messages">
      {{ message }}
    </div>
  </div>
</div>

Ответ 4

В связанном вопросе, который вы опубликовали, у нас уже есть способ достичь этого в простом javascript, поэтому нам нужно только получить ссылку js на dom node, которую мы хотим прокрутить.

Атрибут ref можно использовать для объявления ссылок на элементы html, чтобы сделать их доступными в методах компонентов vue.

Или, если method in the component является обработчиком для некоторого события UI, а цель связана с div, который вы хотите прокрутить в пространстве, вы можете просто передать объект события вместе с вашими желаемыми аргументами и прокрутить как scroll(event.target.nextSibling).

Ответ 5

У меня была такая же потребность в моем приложении (со сложной структурой вложенных компонентов), и мне, к сожалению, не удалось заставить его работать.

Наконец я использовал vue-scrollto, который работает отлично!

Ответ 6

Это решение не мешает моему мозгу думать о scrollTop или scrollHeight, не требует внешней библиотеки и обладает гибкостью, позволяющей прокручивать до определенного элемента.

Вот скрипка.

methods: {
  scrollToElement() {
    const el = this.$el.getElementsByClassName('scroll-to-me')[0];

    if (el) {
      el.scrollIntoView();
    }
  }
}

Затем, если вы хотите прокрутить этот элемент при загрузке страницы, вы можете вызвать этот метод следующим образом:

mounted() {
 this.scrollToElement();
}

Иначе, если вы хотите прокрутить его до щелчка кнопки или другого действия, вы можете назвать его так же:

<button @click="scrollToElement">scroll to me</button>