javascript - 垂直聊天滚动在 VueJs 中不起作用

Question

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

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

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

Answer 1

您确定您的“容器”已充满主体或根元素吗？
你的代码看起来很好...

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

但是问题仍然存在，如果我是你，
我会像老板一样添加一个神奇的像素数(比边距大)!

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