Question

我需要帮助创建一个有限的滚动从下到上。像Facebook消息的东西。

我已经检查了this问题，但似乎并没有按照预期的方式为我工作。问题是，当我到达div的顶部和消息列表的末尾时，它向下滚动，我无法看到前几条消息。如何阻止这种情况发生

此外，当新消息被添加时，现有消息被推下，导致用户失去他们的＆＃34;观看＆＃34;的地方。

这就是我所拥有的：

$(document).ready(function(){

$('#message_board').scrollTop($('#message_board')[0].scrollHeight);

});

$('#message_board').on('scroll', function() {
    var scroll = $('#message_board').scrollTop();
    if (scroll == 0) {
        // Store eference to first message
        var firstMsg = $('.bubble-left:first, .bubble-right:first');

        // Prepend new message here
        var content;
        $.get("ajax/scripts/msg_lst.php?p=<?php echo htmlentities(isset($_GET['p']) ? $_GET['p'] : ''); ?>&f=" + ($('.bubble-left, .bubble-right').length), function(data){
            content= data;
            $('#message_board').prepend(content);
            });

        // After adding new message(s), set scroll to position of
        // what was the first message
        $('#message_board').scrollTop(firstMsg.offset().top);
    }
});

Answer 1

你的问题在这里

$('#message_board').scrollTop(firstMsg.offset().top);

你可以试试这个

$('#message_board').scrollTop(1);

或尝试评论该行代码

 //$('#message_board').scrollTop(firstMsg.offset().top);

但我认为你应该在prepend（）之后使用scrollTop

$('#message_board').prepend(content).promise().done(function(){
     $(this).scrollTop(1);
});

最后..为你想要添加它的元素添加一个特定的类，并使用此类名将scrollTop转换为最后一个元素，并在prepend（）之后使用removeClass（）再次删除该类

$('#message_board').on('scroll', function() {
    var scroll = $('#message_board').scrollTop();
    if (scroll == 0) {
        $(this).prepend(content).promise().done(function(){
            $(this).scrollTop($('.newAppend:last').offset().top);
            $('.newAppend').removeClass('newAppend');
        });
    }
});

Demo here

注意：将所有代码包装在$（document）.ready（function（）{// all 你的代码在这里}）;

Answer 2

确保在邮件前置后滚动。

$ .get接受一个回调，一旦你从服务器得到响应就会执行回调。

你也应该在那里移动.scrollTop，因为你想在回调中添加内容后执行该功能。因为回调之外的所有内容通常都会在回调之前执行。

这样的事情：

$(document).ready(function(){
  $('#message_board').scrollTop($('#message_board')[0].scrollHeight);

  });

  $('#message_board').on('scroll', function() {
    var scroll = $('#message_board').scrollTop();

    if (scroll == 0) {
      // Store eference to first message
      var firstMsg = $('.bubble-left:first, .bubble-right:first');

      // Prepend new message here
      var content;

      $.get("ajax/scripts/msg_lst.php?p=<?php echo htmlentities(isset($_GET['p']) ? $_GET['p'] : ''); ?>&f=" + ($('.bubble-left, .bubble-right').length), function(data){
        content= data;
        $('#message_board').prepend(content);

        // After adding new message(s), set scroll to position of
        // what was the first message
        $('#message_board').scrollTop(firstMsg.offset().top);
      });
    }
});

Answer 3

所以，我终于明白了。有些东西阻止了$('#message_board').scrollTop(firstMsg.offset().top-curOffset);事件。我尝试了.unbind和.off，它永远不会奏效。所以我所做的是将该行添加到ajax的success属性。

   $(document).ready(function(){
       $('#message_board').scrollTop($('#message_board')[0].scrollHeight);
   });

$('#message_board').on('scroll', function() {
    var scroll = $('#message_board').scrollTop();
    if (scroll < 1) {
        // Store eference to first message
        var firstMsg = $('.bubble-left:first, .bubble-right:first');
        var curOffset = firstMsg.offset().top - $('#message_board').scrollTop();
        // Prepend new message here
        var content;
        $.get("ajax/scripts/msg_lst.php?p=<?php echo htmlentities(isset($_GET['p']) ? $_GET['p'] : ''); ?>&f=" + ($('.bubble-left, .bubble-right').length), function(data){
            content= data;
            $('#message_board').prepend(content);
            $('#message_board').scrollTop(firstMsg.offset().top-curOffset);// <<---- Had to add this event to the ajax success function 
            });
    }
});

jquery滚动从下到上，prepand和ajax

3 个答案: