php - 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());
});

我从auto scroll to bottom when overflow auto的答案之一中得到它。