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中的一个答案得到的。

Div刷新和滚动条问题

2 个答案: