2

私は次の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 がリフレッシュされているときにスクロールバーが一番上にリセットされないようにする方法は? または、新しい行が挿入されたときに自動的に下にスクロールできる場合。

ありがとう ！

4

2 に答える 2

0

以下のように試すことができます

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;
    }

});​
于 2012-10-06T16:10:58.790 に答える
0

以下のコードを試してください。これは機能しているようです。

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

オーバーフロー auto の場合、 auto scroll to bottomの回答の1つから取得しました。

于 2012-10-06T17:26:20.160 に答える