只有在用户不滚动页面时才滚动到底部。

Question

只有在用户不滚动页面时才滚动到底部。

3

我又一次对JS感到沮丧了！请帮帮我！

以下是我用于简单聊天应用程序的一些代码，通过AJAX请求从文本文件刷新内容。同时，它会滚动到窗口底部。我希望如果用户向上滚动以跟上进度，则不会在刷新时打断这种行为，而是继续保持他们的位置。我该如何做？

<script>

$(function() {
  startRefresh();  
});
function startRefresh() {
    setTimeout(startRefresh,3000);

    $.post('pollchat.php', function(data) {
         $('#content_div_id').html(data);
         var wtf    = $('#content_div_id');
         var height = wtf[0].scrollHeight;
         wtf.scrollTop(height); 
    });
}
</script>

Any help greatly appreciated.

- user3516183

在刷新内容之前，您需要获取用户的滚动位置，在加载后设置该滚动位置。 - Parag Bhayani

这与 PHP 标签有什么关联？ - M. Eriksson

@user：请查看我的答案，让我知道它是否有帮助。 - Parag Bhayani

你的问题解决了吗？ - Parag Bhayani

显示剩余4条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Parag Bhayani · Answer 1

看看我如何使用当前滚动位置，并计算用户是否已经滚动。

$(function() {
  startRefresh();
});

function startRefresh() {
  setTimeout(startRefresh, 1000);
  var wtf = $('#content_div_id');
  var currentScrollPos = wtf.scrollTop();
  var elementHeight = wtf[0].scrollHeight;
  var scroll = false;

  //User has scrolled, don't set scroll
  if (wtf.height() + currentScrollPos >= elementHeight) {
    scroll = true;
  }

  var data = $('#content_div_id').html();
  data += "Some Text<br/>";
  $('#content_div_id').html(data);

  if (scroll) {
    var height = wtf[0].scrollHeight;
    wtf.scrollTop(height);
  }
}

#content_div_id {
  max-height: 100px;
  overflow-y: scroll;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content_div_id">
  Some Text
  <br/>Some Text
  <br/>Some Text
  <br/>Some Text
  <br/>
</div>

更新： 尝试这段代码，你可能需要修复一两个问题.. 但是看看代码并获取一个想法

$(function() {
  startRefresh();  
});
function startRefresh() {
    setTimeout(startRefresh,3000);

    $.post('pollchat.php', function(data) {
        var wtf = $('#content_div_id');
        var currentScrollPos = wtf.scrollTop();
        var elementHeight = wtf[0].scrollHeight;
        var scroll = false;

        //User has scrolled, don't set scroll
        if (wtf.height() + currentScrollPos >= elementHeight) {
            scroll = true;
        }

         $('#content_div_id').html(data);
         if (scroll) {
            var height = wtf[0].scrollHeight;
            wtf.scrollTop(height);
        }
    });
}