Question

当出现新消息时，您知道大多数聊天内容，滚动内容如何下降。我的聊天每5000毫秒重新加载一次，然后在300毫秒之后将滚动拖动。

但是我想要它，所以当用户拖动向上滚动时，滚动拖动不会影响他。是否有一个函数，用于填充变量，例如，当用户向上滚动时，draggedScroll = true？

http://driptone.com/jony/applications/chat/index.php

这是聊天，如你所见，如果你上去，它会每隔5000毫秒拖动你，我想只在用户向上滚动时阻止它。如果用户再次滚动到底部[0]，它将使draggedScroll = false，这将再次影响他。

我该怎么做？

问题尚未解决！

问题解释：

滚动仅工作 IF 滚动的高度至少为1500px（ scrollTop（1500））（34条消息）在聊天中。）

如果低于该值，则滚动将不起作用，并将向上滚动新消息。

Answer 1

function reload() {
    var oldscrollHeight = ($("#chat").scrollTop() + 470);
    console.log(" old: " + oldscrollHeight);
    $.post("ajax.php", { loadMessages : "1" }, function(data) {
        $(".discussion").html(data); 
        var newscrollHeight = $("#chat").prop("scrollHeight");
        console.log(" new: " + newscrollHeight);
        if(newscrollHeight < (oldscrollHeight + 150)) {
            var height = $('#chat')[0].scrollHeight;
            $('#chat').scrollTop(height);
        }           
    });     
}

基本上我在那里做了什么，我取了卷轴的当前位置，并添加了470像素（因为它总是低于整个高度）。

然后检查，如果新的高度是＆lt;比旧的高度+ 150px。

如果是，则向下滚动。否则保持同一位置。

Answer 2

我自己遇到了问题，这就是我解决问题的方法：

绑定到相应容器的scroll事件
在事件处理程序内读出：
- $(element).scrollTop()
- $(element).prop('scrollHeight')
- $(element).height()
scrollTop == scrollHeight - height
如果条件为true：启用自动滚动，则禁用它。
如果需要，可以减少某种余量以改善用户体验（请参阅我的解决方案）

My solution (written in CoffeeScript)

$('#messageContainer').on('scroll', function(event) {
  var element, height, scrollHeight, scrollTop;
  element = $(this);
  scrollTop = element.scrollTop();
  scrollHeight = element.prop('scrollHeight');
  height = element.height();
  if (scrollTop < scrollHeight - height - 25) {
    disableScroll();
  }
  if (scrollTop > scrollHeight - height - 10) {
    return enableScroll();
  }
});

Answer 3

检查element.scrollTop。如果它等于element.scrollHeight - element.height滚动，否则不滚动。

element = $("#chat")[0];
if (element.scrollTop == element.scrollHeight - element.height)
    element.scrollTop(element.scrollHeight);

Answer 4

只需在滚动栏被设置时设置一个标志，例如：

var bScroll = true; // My flag for true = scrolling allowed, false = scrolling prevented

$('#scrollbar').focus(function(){ bScroll = false; );
$('#scrollbar').focusOut(function(){ bScroll = true; );

function scroll(){
   if(!bScroll){ 
        return false
   }
}

更新：右键，检查bScroll

AJAX Chat - 自动向下拖动向下滚动，但在用户向上滚动时不要拖动它？

4 个答案: