jquery 内容一直滚动效果

发布于 2022-09-01 18:50:14 字数 110 浏览 20 评论 0

现在有一个需求,每隔几秒中会从后台收到log日志,我需要显示在网页上查看.
我想让这个日志滚动起来,这样看着就知道有新的日志产生.效果就像你从终端cat一个日志,总是新的信息会把之前的往上挤.谢谢~!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

青春如此纠结 2022-09-08 18:50:14

非常感谢大家的回答。小瑜的答案给我提示，当然也很感谢kikong的热心回答。
我找打了一个解决方案：slideDown/slideUp

var obj； //Log数组
var index； //当前索引
function renderLog()
if(index < obj.length) {
    //TODO
    //修改Log样式，并隐藏
    $("#log-content").prepend(obj[index++]);
    slideDown(3, function(){   renderLog();   }); 
}

解释一下：
之前我使用for去循环添加Log节点，每个添加动作都有10ms执行时间，实际效果是，所有节点同时执行了添加动作。好像是将左右动作事件注册了，但是循环却会一直执行。
所以想办法让这些动作顺次执行，而不是并行的。
如代码所示，我用了递归去做，sildeDown()里的函数会在执行动作完成后再执行，这样就完美解决里。
效果很理想，跟从shell查看Log效果一样。

回复收藏 0

听你说爱我 2022-09-08 18:50:14

1）页面上设置一个textarea
2）把获取到的log内容文本，append到textarea的内容区域中
3）此时textarea区域滚动条位置就会发生变化
4) 调用textarea元素的scroll方法，滚动到底部
使用div也可以实现

回复收藏 0

感情洁癖 2022-09-08 18:50:14

Code

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body style="margin-bottom: 150px;">
<ul id="logs">
    <li>This is log 1</li>
    <li>This is log 2</li>
    <li>This is log 3</li>
    <li>This is log 4</li>
    <li>This is log 5</li>
    <li>This is log 6</li>
    <li>This is log 7</li>
    <li>This is log 8</li>
</ul>


<script src="script/jquery.js"></script>
<script>

    var i = 9;
    var $logs = $('#logs');

    setInterval(
            function () {
                var $el = $('<li>This is log ' + (i++) + '</li>');
                $el.appendTo($logs);
                $('body').animate({scrollTop: $el.offset().top});
            },
            1000
    )

</script>
</body>
</html>