Question

每隔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;
    }
});

Answer 1

您应该使用.scrollTop在滚动处理程序中获得滚动高度，然后在.load之后设置

DEMO - 尝试向下滚动并等待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);
});

Answer 2

我认为如果你不替换内容，只将新信息附加到容易工作的容器上。

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

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

内容刷新/重新加载后，Div滚动到顶部

2 个答案: