最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Scroll down in vue in specific element - Stack Overflow

programmeradmin6浏览0评论

I am trying to scroll down on new appeared element in vue:

I have chat messages where I have two arrays:

data() {
  return {
    activeChats: [],
    openedChats: [],
    maxOpened: math.round(window.innerWidth / 300), 
  }
}

When I get new message and the conversation is not in active and opened arrays I add to both and it appears on screen because I used v-for on both arrays.

This everything works but I am not sure how to scroll down on div when new chat appears, I tried using refs but had no luck:

<div class="chat" v-for="chat in openedChats" ref="chat-{chat.id}"></div> Or even just chat testing with one chat opened..

And inside axios then() after success I said:

this.$refs.chat['-'+response.data.id].scrollTo(9999999,99999999);
or
this.$refs.chat['-'+response.data.id].scrollTop = 99999999;
or
this.$refs.chat.scrollTo(9999999,99999999);
or
this.$refs.chat.scrollTop = 99999999;

And neither worked...

Any help ? :D

Can it be done without additional library, I need no animatios just to appear at the bottom of the element...

Thanks

I am trying to scroll down on new appeared element in vue:

I have chat messages where I have two arrays:

data() {
  return {
    activeChats: [],
    openedChats: [],
    maxOpened: math.round(window.innerWidth / 300), 
  }
}

When I get new message and the conversation is not in active and opened arrays I add to both and it appears on screen because I used v-for on both arrays.

This everything works but I am not sure how to scroll down on div when new chat appears, I tried using refs but had no luck:

<div class="chat" v-for="chat in openedChats" ref="chat-{chat.id}"></div> Or even just chat testing with one chat opened..

And inside axios then() after success I said:

this.$refs.chat['-'+response.data.id].scrollTo(9999999,99999999);
or
this.$refs.chat['-'+response.data.id].scrollTop = 99999999;
or
this.$refs.chat.scrollTo(9999999,99999999);
or
this.$refs.chat.scrollTop = 99999999;

And neither worked...

Any help ? :D

Can it be done without additional library, I need no animatios just to appear at the bottom of the element...

Thanks

Share Improve this question edited Oct 23, 2018 at 14:39 asked Oct 23, 2018 at 14:31 user8517929user8517929 2
  • 1 There's a handy library for that: rigor789.github.io/vue-scrollto/# – Bennett Dams Commented Oct 23, 2018 at 14:33
  • Is there a way without additional library? :D Since I dont need smooth scrolling but just appearing at the bottom :D – user8517929 Commented Oct 23, 2018 at 14:34
Add a ment  | 

1 Answer 1

Reset to default 5

See this example:

https://jsfiddle/eywraw8t/430100/

Use "watch" (https://v2.vuejs/v2/guide/puted.html) to detect changes in the message array (either from ajax or simply a button like in the example). Set the id (or you can use ref if you prefer) based on the index of the message. Then scroll to the last element in your array (get the last one via array.length).

new Vue({
  el: "#app",
  data: {
    messages: [
      { id: 1, text: 'message' },
    ],
  },
  watch:
  {
    messages: function() {
      let id = this.messages.length;
      //takes a bit for dom to actually update
      setTimeout(function() {
          document.getElementById('message-' + id).scrollIntoView();
      }, 100);
      
    },
  },
  methods: {
    addMessage: function(){
      let id = this.messages.length + 1;
      this.messages.push({ id: id, text: 'message'});
    }
  }
})
<div id="app">
  <button v-on:click="addMessage()" style="position:fixed">
  Add message
  </button>
  <div class="message" v-for="message in messages" :id="'message-' + message.id">
    {{message.text}} {{ message.id}}
  </div>
</div>

发布评论

评论列表(0)

  1. 暂无评论