问设置滚动条始终在底部
EN

Stack Overflow用户

提问于 2022-06-05 21:18:47

回答 1查看 84关注 0票数 0

我正在构建一个vue聊天应用程序，我希望我的滚动条总是在底部。我只使用溢出: auto；和编码自定义滚动条。每次我发信息时，滚动条都无法到达底部。在vue js中有什么帮助？

<v-card
     fluid
    style="overflow: auto; ">
</v-card>

和CSS：

::-webkit-scrollbar {
  width: 10px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #ccc;  
}
    enter code here
::-webkit-scrollbar-thumb:hover {
   background: #999;  
}

css

vue.js

vuetify.js

回答 1

Stack Overflow用户

发布于 2022-06-06 09:30:38

我也有同样的案子。你可以这样做：

 <div v-for="(message, index) in messages" :key="index">
    <v-card :id="message.id" >
      {{ message.text }}
    </v-card>
  </div>


  watch: {
// scroll to end when message send or select another chat
messages: async function () {
    await this.scrollToEnd();
},

方法：

 async scrollToEnd() {
  try {
    if (this.messages && this.messages.length > 0) {
      const id = await this.messages[this.messages.length-1].id; 
     document.getElementById(id).scrollIntoView({ block: "start" });
    }
  } catch (error) {
    console.log(error);
  }
},

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72511199

复制

相似问题

问设置滚动条始终在底部
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问设置滚动条始终在底部EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问设置滚动条始终在底部
EN