首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在HTML中自动显示文本的最后一部分(从外部接收)

在HTML中自动显示文本的最后一部分(从外部接收)
EN

Stack Overflow用户
提问于 2019-06-05 06:47:06
回答 2查看 45关注 0票数 1

我正在用ReactJS开发一个网页。在这个网页中,我有一个应该模仿控制台的div。控制台中显示的文本来自SocketIO外部。消息保存在一个数组中,每次新消息到达时都会更新该数组。

问题是,我希望看到即将出现的消息,而不必每次向下滚动(就像在真正的控制台中发生的那样,消息被追加,控制台的“页面”向下显示)。有可能吗?

非常感谢和亲切的问候

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-06-05 06:52:05

调用setInterval自动滚动,下面的代码每5秒滚动一次。

代码语言:javascript
运行
复制
window.setInterval(function() {
  var div= document.getElementById('consolediv');
  div.scrollTop = div.scrollHeight;
}, 5000);
票数 1
EN

Stack Overflow用户

发布于 2019-06-05 07:13:08

您可能可以通过使用一些CSS来实现这一点。

我创建了一个JSFiddle,以便您可以测试它(这里)。

基本上你需要申请,

代码语言:javascript
运行
复制
overflow: auto; 
display:flex; 
flex-direction:column-reverse;

到你的集装箱舱去。此外,我建议添加一个额外的包装器div,以避免flex-direction:column-reverse;实际上逆转任何事情。

我还没有用SocketIO的动态内容对它进行测试,但我没有理由认为它不应该工作。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56455437

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档