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 回答