强制滚动条到底部
我正在制作一个运行良好的小型消息/聊天系统。问题是,消息输出到的
没有按照我需要的方式滚动。所有新消息都会添加到 div 的底部,当添加更多消息并显示滚动条时,滚动将停留在
的顶部。 我需要将其反转,以便滚动始终粘在
的底部。我想要的一个很好的例子是 Steam 的聊天窗口,甚至是我用来填写问题的文本输入。
由于我想避免 jQuery,这让我完全陷入困境。如果您能指出我正确的方向,那就太好了!我不确定 HTML 和 CSS 是否可以处理这个问题,或者 JavaScript 是否有必要。
I am making a little messaging / chat system that is working nice and fine. The problem is, the <div>
which the messages are outputted to does not scroll the way I need it to.
All the new messages are added to the bottom of the div and when more are added and the scrollbar shows up, the scrolling stays at the top of the <div>
. I need this to be reversed, so that the scrolling always sticks to the bottom of the <div>
.
A good example of what I want would be Steam's chat windows, or even this text input which I am using to fill out the question.
As I would like to avoid jQuery, this has me completely stuck. If you could point me in the correct direction that would be great! I am not sure if HTML and CSS can handle this, or if JavaScript is necessary at all.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
下面的 Javascript 代码应该将您的 div 滚动条保持在底部,就像您所描述的那样:
可以在下面的链接中找到此解决方案和更多信息:
<一href="http://web.archive.org/web/20080821211053/http://radio.javaranch.com/pascarello/2005/12/14/1134573598403.html ">http://web.archive.org/web/20080821211053/http://radio.javaranch.com/pascarello/2005/12/14/1134573598403.html
The Javascript code below should keep your div's scrollbar positioned at the bottom like you described:
This solution and more information can be found on the link below:
http://web.archive.org/web/20080821211053/http://radio.javaranch.com/pascarello/2005/12/14/1134573598403.html
我认为这是一个更好的解决方案:
I think this is a better solution:
对于 Kotlin,我使用了以下内容:
For Kotlin I have used the following: