Javascript jquery自下而上滚动、前置和ajax

我需要帮助创建一个从下到上的有限滚动。类似于facebook的消息

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

此外，当新消息被预先添加时，现有消息被向下推，导致用户失去“查看”位置

以下是我所拥有的：

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

$（文档）.ready（函数（）{
$（'留言板'）.scrollTop（$（'留言板'）[0]。scrollHeight）；
});
$（“#留言板”）。在（'scroll'，function（）上{
var scroll=$（“#消息板”）.scrollTop（）；
如果（滚动==0）{
//存储对第一条消息的引用
var firstMsg=$（'.bubble left:first，.bubble right:first'）；
//在此处预编新消息
var含量；
$.get（“ajax/scripts/msg_lst.php？p=&f=“+（$（'.bubble left，.bubble right'）.length）），函数（数据）{
内容=数据；
$（'留言板'）。前置（内容）；
});
//添加新消息后，将滚动设置为
//第一条信息是什么
$（“#消息板”）.scrollTop（firstMsg.offset（）.top）；
}
});

您的问题就在这里

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

你可以试试这个

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

或者尝试注释那行代码

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

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

最后。。将特定类添加到要在其前面添加的元素中，并使用此类名在div上滚动到最后一个元素，在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');
        });
    }
});

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

---

确保在消息被预先添加后滚动

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

$（文档）.ready（函数（）{
$（'留言板'）.scrollTop（$（'留言板'）[0]。scrollHeight）；
});
$（“#留言板”）。在（'scroll'，function（）上{
var scroll=$（“#消息板”）.scrollTop（）；
如果（滚动==0）{
//存储对第一条消息的引用
var firstMsg=$（'.bubble left:first，.bubble right:first'）；
//在此处预编新消息
var含量；
$.get（“ajax/scripts/msg_lst.php？p=&f=“+（$（'.bubble left，.bubble right'）.length）），函数（数据）{
内容=数据；
$（'留言板'）。前置（内容）；
//添加新消息后，将滚动设置为
//第一条信息是什么
$（“#消息板”）.scrollTop（firstMsg.offset（）.top）；
});
}
});

所以，我终于明白了。有东西停止了

$（'#消息板'）.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 
            });
    }
});

$（文档）.ready（函数（）{
$（'留言板'）.scrollTop（$（'留言板'）[0]。scrollHeight）；
});
$（“#留言板”）。在（'scroll'，function（）上{
var scroll=$（“#消息板”）.scrollTop（）；
如果（滚动<1）{
//存储对第一条消息的引用
var firstMsg=$（'.bubble left:first，.bubble right:first'）；
var curOffset=firstMsg.offset（）；
//在此处预编新消息
var含量；
$.get（“ajax/scripts/msg_lst.php？p=&f=“+（$（'.bubble left，.bubble right'）.length）），函数（数据）{
内容=数据；
$（'留言板'）。前置（内容）；
$（“#message_board”）.scrollTop（firstMsg.offset（）.top curOffset）；//这是有效的。但是当内容被预先设置好时，现有的消息会被向下推…@user3284463 ok尝试在预先设置好后停止scrollTop，我的意思是注释此行//$（此）。scrollTop（1）；@user3284463我将制作一个演示wait@user3284463…更新的回答由于我的内容是动态添加的，因此无法使其工作。我在
$（此）之前尝试了
$（此）.last（）.addClass（'newAppend'）
。
$（此）.scrollTop（$（'.newAppend:last'）.offset（）.top）
hmmm…当我使用此代码时，当我到达顶部时，它会预先准备好，然后滚动到底部。。。。
   $(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 
            });
    }
});