Scrollen Sie mit Vue.js zum Ende von div

Ich habe eine Vue.js-Komponente mit mehreren Elementen darin. Ich möchte automatisch zum Ende dieses Elements scrollen, wenn eine Methode in der Komponente aufgerufen wird.

Machen Sie im Grunde dasselbe. Ich habe jedoch keine Möglichkeit gefunden, das Element in meiner Komponente zu erhalten und zu ändern scrollTop

Ich verwende derzeit Vue.js 2.0.8.

2022 einfach, lesbar, reibungsloses Scrollen und schadet Ihrem Gehirn nicht … verwenden el.scrollIntoView()

scrollIntoView() hat Optionen, die Sie wie übergeben können scrollIntoView({behavior: 'smooth'}) um reibungsloses Scrollen aus der Box zu erhalten und benötigt keine externen Bibliotheken.

Hier ist eine Geige.

methods: {
  scrollToElement() {
    const el = this.$refs.scrollToMe;

    if (el) {
      // Use el.scrollIntoView() to instantly scroll to the element
      el.scrollIntoView({behavior: 'smooth'});
    }
  }
}

Wenn Sie dann beim Laden der Seite zu diesem Element scrollen möchten, können Sie diese Methode wie folgt aufrufen:

mounted() {
  this.scrollToElement();
}

Andernfalls, wenn Sie mit einem Klick auf eine Schaltfläche oder einer anderen Aktion dorthin scrollen möchten, können Sie es auf die gleiche Weise nennen:

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

Das Scrollen funktioniert bis hinunter zu IE 8. Die glattes Scrollen Der Effekt funktioniert nicht standardmäßig in IE oder Safari. Bei Bedarf gibt es eine Füllwatte dafür hier erhältlich wie @mostafaznv in den Kommentaren erwähnt.

Soweit ich weiß, besteht der gewünschte Effekt darin, zum Ende einer Liste zu scrollen (oder scrollbar div), wenn etwas passiert (z. B.: ein Element zur Liste hinzugefügt wird). In diesem Fall können Sie zum Ende eines Containerelements (oder sogar der Seite selbst) nur mit reinem JavaScript und den VueJS-Selektoren scrollen.

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

Ich habe ein funktionierendes Beispiel in bereitgestellt diese Geige.

Jedes Mal, wenn ein Element zur Liste hinzugefügt wird, wird die Liste zum Ende gescrollt, um das neue Element anzuzeigen.

Hoffe das hilft dir.

Ich habe die akzeptierte Lösung ausprobiert und sie hat bei mir nicht funktioniert. Ich benutze den Browser-Debugger und habe herausgefunden, dass die tatsächliche Höhe, die verwendet werden sollte, die ist clientHeight ABER Sie müssen dies in die einfügen updated() Haken, damit die gesamte Lösung funktioniert.

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;
},

1. Verwenden Sie die ref -Attribut für das DOM-Element als Referenz

<div class="content scrollable" ref="msgContainer">
    <!-- content -->
</div>

2. Sie müssen eine UHR einrichten

  data() {
    return {
      count: 5
    };
  },
  watch: {
    count: function() {
      this.$nextTick(function() {
        var container = this.$refs.msgContainer;
        container.scrollTop = container.scrollHeight + 120;
      });
    }
  }

3. Stellen Sie sicher, dass Sie das richtige CSS verwenden

.scrollable {
  overflow: hidden;
  overflow-y: scroll;
  height: calc(100vh - 20px);
}

Hier ist ein einfaches Beispiel mit ref zum Ende von a scrollen 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>

Beachten Sie dies, indem Sie setzen ref="messageDisplay" im HTML haben Sie Zugriff auf das Element durch vueContent.$refs.messageDisplay

Wenn Sie IE11 und (altes) Edge unterstützen müssen, können Sie Folgendes verwenden:

scrollToBottom() {
    let element = document.getElementById("yourID");
    element.scrollIntoView(false);
}

Wenn Sie IE11 nicht unterstützen müssen, funktioniert Folgendes (klarerer Code):

scrollToBottom() {
    let element = document.getElementById("yourID");
    element.scrollIntoView({behavior: "smooth", block: "end"});
}

Versuchen vue-chat-scroll:

Per npm installieren: npm install --save vue-chat-scroll

Importieren:

import Vue from 'vue'
import VueChatScroll from 'vue-chat-scroll'
Vue.use(VueChatScroll)

in app.js nach window.Vue = require('vue').default;

dann benutze es mit:

<ul class="messages" v-chat-scroll>
  // your message/chat code...
</ul>