9

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

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

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

这是聊天，如您所见，如果您向上移动，它会每 5000 毫秒向下拖动一次，我只想在用户向上滚动时阻止它。并且如果用户再次滚动到底部[0]，就会使draggedScroll = false，所以会再次影响他。

我怎么做？

问题还没有解决！

问题解释：

仅当滚动高度至少为 1500 像素（scrollTop (1500)）（聊天中有 34 条消息）时，滚动才会起作用。

如果低于此值，滚动将不起作用，并会在新消息时向上滚动。

4

4 回答 4

5 
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 像素（因为它总是低于整个高度）。

然后检查，如果新高度小于旧高度 + 150px。

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

于 2013-06-27T22:59:36.237 回答
4

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

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

我的解决方案（用 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();
  }
});
于 2013-06-21T13:07:11.600 回答
2

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

element = $("#chat")[0];
if (element.scrollTop == element.scrollHeight - element.height)
    element.scrollTop(element.scrollHeight);
于 2013-06-21T13:06:47.863 回答
1

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

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

于 2013-06-21T13:08:35.637 回答