Javascript 自动滚动消息列表

我正在使用express和socket.io制作一个消息应用程序。这些消息将附加到列表中，如下所示：

socket.on（'message'，（content）=>{
$（'#messages'）.append（`li>${content.bold}${content.std}`）；
$（“#消息”）.scrollTop=$（“#消息”）.scrollHeight；
});

消息被正确地追加，但不会出现滚动。我没有收到错误消息，我不确定原因

完整的源代码可以在这里找到

编辑 我在js调用的底部添加了一个

console.log（'scroll'）

，但是没有显示任何内容

socket.on（'message'，（content）=>{
$（'#messages'）.append（`li>${content.bold}${content.std}`）；
$（“#消息”）.scrollTop=$（“#消息”）.height（）；
console.log（'scroll'）
});

---

这让我觉得滚动没有被调用，即使消息被追加了

jQuery对象没有属性scrollHeight，将其更改为函数调用

height

$（'#消息'）。scrollTop=$（'#消息'）。高度（）；

jQuery对象没有属性

scrollHeight

，将其更改为

height

的函数调用

$（'#消息'）。scrollTop=$（'#消息'）。高度（）；

试试这个

socket.on（'message'，（content）=>{
$（'#messages'）.append（`li>${content.bold}${content.std}`）；
$（“#消息”）。动画（{scrollTop:$（“#消息”）[0]。scrollHeight}，1000）；
console.log（'scroll'）
});

试试这个

socket.on（'message'，（content）=>{
$（'#messages'）.append（`li>${content.bold}${content.std}`）；
$（“#消息”）。动画（{scrollTop:$（“#消息”）[0]。scrollHeight}，1000）；
console.log（'scroll'）
});

我尝试创建聊天室的模拟

溢出期间，元素的高度没有改变，这就是@expressjs123的答案不起作用的原因，您需要使用聊天框中内容的高度，即元素的

scollHeight

元素.scrollHeight

只读属性是对 元素内容的高度，包括屏幕上不可见的内容 由于溢出而导致屏幕损坏

scrollHeight

是元素的属性，因此我使用了普通javascript代码来获取scollheight

var element = document.getElementById("messages");
element.scrollHeight;

注意：我已经给了你一个基本的概述，如何实现100%的垂直滚动，代码可能会随着你的代码/项目而变化，你可能需要付出一些努力，但这是你所寻找的基本想法

setInterval（函数（）{
var元素=document.getElementById（“消息”）；
$（“#消息”）.append（
Message#“+new Date（）.getTime（）+”
”）；
$（“#消息”）.scrollTop（元素.scrollHeight）；
}, 500);
#消息{
高度：300px；
宽度：200px；
溢出：自动；
边框：1px实心#ddd；
背景#f1f1；
填充物：5px；
字体系列：monospace；
}
p{
边框：1px实心#ddd；
背景：#fff；
填充：4px；
字体大小：11px；
宽度：自动；
浮动：左；
明确：两者皆有；
边际：2px0；
边界半径：3px；
}
p、 m4，p.m3，p.m0{
背景：#f1f8ff；
浮动：对；
}

scrolltop是一个函数，因此必须使用（height）（jquery文档：）调用它。（几乎）每个jquery东西都是通过一个函数调用的
scrolltop是一个函数，因此您必须使用（height）（jquery文档：）调用它。（几乎）每个jquery东西都是通过函数调用的
谢谢您的回答！请看我上面的编辑，我可以问一下为什么有
控制台.log
吗？我刚刚加了一句，哈哈。基本上，我认为问题在于，由于日志没有出现，滚动没有被调用。它是否在页面上滚动，尽管“不，它不是滚动谢谢你的答案！请看我上面的编辑，我可以问一下为什么有
控制台.log
吗？我刚刚加了一句，哈哈。基本上，我认为问题在于没有调用滚动，因为日志没有出现。它是否在页面上滚动，尽管“不，它没有滚动”
\messageContainer
的CSS是什么？你可能需要一个overflow@Federico
overflow-y:scroll
你需要用jquery做那项工作吗？
#messageContainer
的CSS是什么？你可能需要一个overflow@Federico
overflow-y：滚动