保持Div滚动到底部

我知道很多问题都被问到了，但我没有看到与我的要求相同的问题。保持Div滚动到底部

我有一个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 echo'ing其结果和div更新。

我需要保持test div滚动到底部。我一直回声$y像这样后面添加一个新行做：

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

但我觉得有一种更好的方式来做到这一点，然后保持呼应该脚本。

任何人都可以建议如何让div滚动到底部？

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

感谢

票为重复引用正在讨论滚动到div的底部，因为它正在更新不是如何滚动到div的底部。

来源

2017-02-13 Tom

您可以使用jQuery bind-Event：

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

working fiddle

如果检索阿贾克斯数据$(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支持增加了propertychange。

来源

2017-02-13 09:15:04 Slatyoo

感谢您有没有办法跨浏览器做到这一点？ – Tom

编辑答案。这应该工作在ie（现在不能测试） – Slatyoo

谢谢 - 刚刚在Chrome中试过，它没有工作。数据被添加到div，但它不滚动到底部。 – Tom

我编辑了我的答案。首先，我没有正确地阅读你的问题。只需从php中删除这个回声，并在你正在做Ajax调用的文件中使用它。将该行成功放入ajax调用的一部分，紧挨着更新列表的行（即更新数据的div）之后。

来源

2017-02-13 09:27:27 prabhjot

谢谢你不会这样做，我有什么？ – Tom

好吧！请告诉我，如果数据是通过ajax或页面刷新获取的？ – prabhjot

@Tom通过ajax获取数据，并在每次更新时回显数据和脚本行。对？ – prabhjot

保持Div滚动到底部

回答

相关问题