我正在用ReactJS开发一个网页。在这个网页中,我有一个应该模仿控制台的div。控制台中显示的文本来自SocketIO外部。消息保存在一个数组中,每次新消息到达时都会更新该数组。
问题是,我希望看到即将出现的消息,而不必每次向下滚动(就像在真正的控制台中发生的那样,消息被追加,控制台的“页面”向下显示)。有可能吗?
非常感谢和亲切的问候
发布于 2019-06-05 06:52:05
调用setInterval
自动滚动,下面的代码每5秒滚动一次。
window.setInterval(function() {
var div= document.getElementById('consolediv');
div.scrollTop = div.scrollHeight;
}, 5000);
发布于 2019-06-05 07:13:08
您可能可以通过使用一些CSS来实现这一点。
我创建了一个JSFiddle,以便您可以测试它(这里)。
基本上你需要申请,
overflow: auto;
display:flex;
flex-direction:column-reverse;
到你的集装箱舱去。此外,我建议添加一个额外的包装器div,以避免flex-direction:column-reverse;
实际上逆转任何事情。
我还没有用SocketIO的动态内容对它进行测试,但我没有理由认为它不应该工作。
https://stackoverflow.com/questions/56455437
复制相似问题