javascript - 自定义聊天框滚动条始终显示在底部

标签 javascript html css

我有一个自定义聊天框。我添加了 overflow-y 来滚动。 现在,每当我在文本框中写一些东西时,它就会出现在滚动条窗口中。 如何让滚动条窗口显示我写的最后一条消息,在我的例子中它总是显示在顶部。

最佳答案

在 Javascript 中你可以试试,假设你的 div 有 id "scrolling"

document.getElementById("滚动").scrollTop = document.getElementById("滚动").scrollHeight;

其中 scrollTop 是对象滚动的像素数,scrollHeigth 是元素内容的总高度,包括由于溢出而不可见的内容。

重要:

上面的代码应该在每次聊天框中出现新消息时执行,为此它应该位于脚本中的正确位置。

来源:

https://developer.mozilla.org/en-US/docs/DOM/element.scrollTop

https://developer.mozilla.org/en-US/docs/DOM/element.scrollHeight

另一种解决方案:

也许您也可以通过为消息设置 anchor (#idOfLastMessage),然后使用 iframe 而不是指向 www.yoursite.com/url-of-the-message-list 的 div 来实现#idOfLastMessage

关于javascript - 自定义聊天框滚动条始终显示在底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13620002/

相关文章:

javascript - 查找一个元素并将其移动到另一个元素下方

html - 我将使用什么 CSS 来显示 1 到 5 评级图标或 Sprite ?

html - 如何正确对齐 html/css 中的首字下沉?

javascript - Google Sheets 脚本中的可变参数自定义函数

javascript正则表达式在匹配模式后获取字符串

javascript - jQuery Load 不解析 HTML 变量

html - 将样式应用于元素但不应用于另一个元素内的元素

javascript - ReactJS表单组件的最佳实践

javascript - 使用 jQuery 按名称属性获取选择值

javascript - 如何控制 CodeIgniter 中单击按钮时的发布表单数据