web-dev-qa-db-fra.com

Faites défiler l'écran vers le bas avec Vue.js

J'ai un composant Vue avec plusieurs éléments. Je veux faire défiler automatiquement jusqu'au bas de cet élément lorsqu'une méthode du composant est appelée (en gros, faire comme dans Faire défiler vers le bas de div? ). Cependant, je n'ai pas trouvé le moyen d'obtenir l'élément dans mon composant et de modifier scrolTop

J'utilise actuellement Vue 2.0.8

javascriptvue.js
18
angrykoala

Si j'ai bien compris, l'effet souhaité est de faire défiler l'écran jusqu'à la fin de la liste (ou d'un div à défilement) lorsqu'un événement survient (par exemple: un élément est ajouté à la liste). Si tel est le cas, vous pouvez faire défiler l'écran jusqu'à la fin d'un élément de conteneur (ou même la page elle-même) en utilisant uniquement du Javascript pur et les sélecteurs VueJS.

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

J'ai fourni un exemple de travail dans ce violon: https://jsfiddle.net/my54bhwn

Chaque fois qu'un élément est ajouté à la liste, la liste défile jusqu'à la fin pour afficher le nouvel élément.

J'espère que cela vous aidera.

37
Italo Ayres

J'ai essayé la solution acceptée et cela n'a pas fonctionné pour moi. J'utilise le débogueur de navigateur et j'ai découvert que la hauteur réelle à utiliser est la variable clientHeightMAISque vous devez l'insérer dans le crochet updated() pour que toute la solution fonctionne.

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

Voici un exemple simple utilisant #ref pour faire défiler jusqu'au bas d'un 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>

Notez qu'en mettant ref='messageDisplay' dans le code HTML, vous avez accès à l'élément via vueContent.$refs.messageDisplay

3
capncanuck

Dans la question connexe que vous avez postée, nous avons déjà un moyen d'y parvenir en javascript simple. Il suffit donc d'obtenir la référence Js du nœud dom que nous voulons faire défiler. 

L'attribut ref peut être utilisé pour déclarer des références à des éléments HTML afin de les rendre disponibles dans les méthodes de composant de vue. 

Ou, si le method in the component est un gestionnaire pour un événement d'interface utilisateur et que la cible est liée au div que vous souhaitez faire défiler dans l'espace, vous pouvez simplement passer l'objet événement avec vos arguments souhaités et faire défiler comme scroll(event.target.nextSibling).

1
PanJunjie潘俊杰