垂直聊天滚动在 VueJs 中不起作用答案

【问题标题】：Vertical Chat scrolling is not working in VueJs垂直聊天滚动在 VueJs 中不起作用
【发布时间】：2018-10-19 06:03:45
【问题描述】：

我在 VUE JS 中使用聊天滚动。每次有新消息出现或页面加载时，我都希望在页面底部滚动消息。我正在尝试在一个有点令人惊讶的功能中添加一个页面滚动代码。

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

它正在工作，但无法完全向下滚动到完整底部。有了这个，滚动保持在顶部和底部之间的某个位置。当我再触发一次时，它需要滚动到整个底部。我希望在第一次单击而不是两次单击时滚动底部。请帮帮我。

【问题讨论】：

【解决方案1】：

您确定您的“容器”在正文或根元素上已满？
你的代码看起来不错...

您最好检查一下：
1) URL 栏高度问题（在移动设备上）
2) HTML 层次结构及其 css
3) CSS 盒子模型和 html 的默认 css 值。

但问题仍然存在，如果我是你，
我会像老板一样添加一个MAGIC PIXEL NUMBER（大于边距）！

大于（大于其文档高度）的 scrollTop 值不会引发任何错误。（但注意它的累积..）

【讨论】：