javascript - 仅当用户不滚动时滚动到底部

Question

我发现自己再次对 JS 感到沮丧!请帮忙!

下面是我用于一个简单聊天应用程序的一些代码，它通过 AJAX 请求刷新文本文件中的内容。同时它滚动到窗口底部。我希望这样，如果用户向上滚动以 catch 它，它就不会在刷新时将它们发送到底部来继续中断此行为。我怎么能这样做呢。

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

非常感谢任何帮助。

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