Div刷新和滾動條問題

Question

我有以下Javascript代碼：

<script> 
var auto_refresh = setInterval(
function()
{
$('#loaddiv').load('tables.php');
}, 1000);
</script>

和

<div id="loaddiv">
<div style="float: left; width:650px; height:99%; border:2px solid #000; 
 overflow:auto; background-color:#FFF;">
 <?php 
 index_table();
 ?>
</div>
</div>

上面的Div是要在1秒鍾后刷新其內容。 現在，此內容的輸出是一個基於用戶提交具有多個行的表。 當行數超過屏幕高度時，將顯示滾動條。 您可以在其中向下滾動以查看添加的行。

現在問題從這里開始，因為此Div刷新時，滾動條自動重置為頂部。 這使得很難看到其余的行。

刷新Div時如何使滾動條停止從頂部重置？ 或者，如果有可能在插入新行時自動向下滾動。

謝謝 ！

Answer 1

您可以嘗試如下

var isScrolling = false;
var lastScrollPos = 0;
var counter = 0;
$(function() {

    $('#loaddiv').on('scroll', function() {
        isScrolling = true;
        lastScrollPos = this.scrollTop;
    });


    refreshTimer = setInterval(refreshContent, 1000);

    function refreshContent() {
        if (!isScrolling) {
            $('#loaddiv').load('tables.php').scrollTop(lastScrollPos);
        }
        isScrolling = false;
    }

});​

Answer 2

試試下面的代碼。 這似乎正在工作。

$('#loaddiv').load('tables.php', function() {
  $(this).scrollTop($(this).prop("scrollHeight") - $(this).height());
});

我從溢出時自動滾動到底部的答案之一得到它。