Question

我知道有很多关于此的问题，但我没有看到与我的要求相同的问题。

我有一个div，并通过调用外部页面然后将结果实时写入div来添加数据。使用时可以正常工作：

<div id='test'>

$x = popen("php test.php", 'r');

while($y = fgets($x, 512)) {
    echo "$y<br>";
    ob_flush();flush();
}
pclose($x);

</div>

test.php回显其结果并更新div。

我需要将test div保持在底部。我一直在回声$y之后添加一个新行，如下所示：

echo "<script>var objDiv = document.getElementById(\"test\");objDiv.scrollTop = objDiv.scrollHeight;</script>";

但我觉得有更好的方法可以做到这一点，然后继续回应那个剧本。

有人可以建议如何保持div滚动到底部吗？

是否无法绑定检测div上内容更改的事件然后滚动到底部，而不必一遍又一遍地回显相同的代码？

由于

作为副本引用的故障单正在讨论滚动到div的底部，而不是如何在更新时滚动到div的底部。

Answer 1

您可以使用jQuery bind-Event：

$('.box').bind("DOMSubtreeModified propertychange", function(e) {
    $(this).animate({ scrollTop: $(this).prop("scrollHeight") }, 100);
});

working fiddle

如果您通过ajax $(document).on()

检索数据

$(document).on("DOMSubtreeModified propertychange", ".box", function(e) {
        $(this).animate({ scrollTop: $(this).prop("scrollHeight") }, 100);
});

working fiddle

来源： Jquery Event : Detect changes to the html/text of a div

DOMSubtreeModified无法使用IE浏览器。

编辑：为IE-support添加了`propertychange。

Answer 2

我编辑了我的答案。首先，我没有正确地阅读你的问题。只需从php中删除此回显并在您正在进行ajax调用的文件中使用它。将该行放在ajax调用的成功部分，就在更新列表的行之后（用于更新数据的div）。

保持Div滚动到底部

2 个答案: