在特定元素中向下滚动

Posted 2023-05-08

【中文标题】在特定元素中向下滚动

【英文标题】：Scroll down in vue in specific element

【发布时间】：2019-03-27 20:13:34

【问题描述】：

我正在尝试向下滚动 vue 中出现的新元素：

我有两个数组的聊天消息：

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

当我收到新消息并且对话不在活动和打开的数组中时，我将两者都添加并显示在屏幕上，因为我在两个数组上都使用了v-for。

这一切正常，但我不确定在出现新聊天时如何在 div 上向下滚动，我尝试使用 refs 但没有运气：

<div class="chat" v-for="chat in openedChats" ref="chat-chat.id"></div> 甚至只是打开一个聊天进行聊天测试..

在axios then()里面成功后我说：

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;

两者都不起作用......

有什么帮助吗？ :D

不需要额外的库就可以完成吗，我不需要动画就可以出现在元素的底部...

谢谢

【问题讨论】：

有一个方便的库：rigor789.github.io/vue-scrollto/#

有没有办法不用额外的库？ :D 因为我不需要平滑滚动而只是出现在底部 :D

【参考方案1】：

看这个例子：

https://jsfiddle.net/eywraw8t/430100/

使用“watch” (https://vuejs.org/v2/guide/computed.html) 来检测消息数组中的变化（来自 ajax 或只是示例中的按钮）。 根据消息的索引设置 id（或者如果您愿意，可以使用 ref）。 然后滚动到数组中的最后一个元素（通过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>

【讨论】：

我以不同的方式做到了：D 我有两个问题，我的 ref 或 id 是字符串，而不是作为值传递，所以它们是未定义的。第二个问题是数组更新后滚动开始，但还没有渲染元素，所以我添加了 100 毫秒的 settimeout，现在它可以工作了。顺便说一句，我使用 document.getelementbyid('chat-'+reponse.data.id) 作为 el，所以我说 el.scrollTop = el.scrollHeight; inside timeout