0

5秒ごとに更新されるDivを取得しました。divには、ユーザーがスクロールできるようにスクロールするように設定されたスクロールがありますが、更新が行われると、divのスクロールは一番上に戻ります。divが更新された後、スクロール位置を維持する方法はありますか？

これが私のCSSです：

#alerts_container {
    height: 150px;
    width: 250px;
    overflow: scroll;
    overflow-x: hidden;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #666;
}

JS：

refresh_alerts = setInterval(function (){
    $('#leftside div#alerts_container').load('staffhome.php #alerts_container' );
}, 5000)

HTML：

 <div id='alerts_container'>
  <?php 
   include_once('includes/my_alerts.php'); 
  ?> 
 </div>

これを機能させるためにSKSの回答を使用しましたが、彼のコードを少し変更する必要がありました。

var isScrolling = false;
var lastScrollPos = 0;
var counter = 0;
$(function() {
    $('#alerts_container').bind("scroll", function (){
       isScrolling = true;
    });
    refresh_alerts = setInterval(refreshContent, 5000);
    function refreshContent() {
        lastScrollPos = $('#alerts_container').scrollTop();
        if (!isScrolling) {
            $('#alerts_wrapper').load('staffhome.php #alerts_container', function () {
             $('#alerts_container').scrollTop(lastScrollPos);
            });
        }
      isScrolling = false;
    }
});
4

2 に答える 2

1

を使用してスクロールハンドラー内でスクロールの高さを取得し.scrollTop、その後に設定する必要があります.load

デモ-一番下までスクロールして、新しいコンテンツが更新されるまで5秒待ちます。

以下はデモからの要約です、

var lastScrollPos = 0;
$('#scrollingDiv').on('scroll', function() {
    lastScrollPos = this.scrollTop;
});

と.loadコールバックで

$('#leftside div#alerts_container').load('staffhome.php #alerts_container' , function () {
   $(this).scrollTop(lastScrollPos);
});
于 2012-04-03T22:50:01.863 に答える
0

コンテンツを置き換えずに、単に機能するコンテナに新しい情報を追加するだけだと思います。

http://api.jquery.com/jQuery.get/

http://api.jquery.com/append/

于 2012-04-03T22:50:13.643 に答える