主页 / 问题 / 1282920
Accepted
hibinyru
Asked:2022-05-17 21:28:35 +0000 UTC2022-05-17 21:28:35 +0000 UTC

像以前的消息聊天一样无限向上滚动

  • 772

朋友们。我无法解决聊天中之前消息无限滚动的问题。

它似乎工作，但它没有正确输出。不是这个顺序。解决方案是表面上的某个地方，但该死的....我无法决定。

当您第一次单击“以前的消息”（#prev-mess）时，ajax 会正确加载块 - 在前一个 #im-dialog-prev 上方，随后的点击插入到前一个下方，尽管您希望它是更高。如何赢得它？

$(document).ready(function($)
  {
  $(".im-dialog").animate({ scrollTop: 20000000 }, "slow");
  });


var block_show = false;

function WatchMore()
  {
  var $target = $("#showmore-triger");
  if (block_show)
    {
    return false;
    }
  var page = $target.attr("data-page");
  page++;
  block_show = true;

  $.ajax({
    url: "/new/im/ajax/previus_messages.php?id=26675&page=" + page,
    dataType: "html",
    success: function(data)
      {
      $(".im-dialog #im-dialog-prev").append(data);
      block_show = false;
      }
    });
  console.log("/new/im/ajax/previus_messages.php?id=26675&page=" + page);

  $target.attr("data-page", page);
  if (page >=  $target.attr("data-max"))
    {
    $target.remove();
    }
  }

$("#prev-mess").click(function()
  {
  WatchMore();
  });
.im-dialog
  {
  height:300px;
  padding:0 8px 0 0;
  margin:16px -8px 16px 0;
  overflow:auto;
  }
.im-dialog-left
  {
  float:left;
  max-width:85%;
  background-color:#f4f4f4;
  border-radius: 0 12px 12px 12px;
  padding:12px;
  border:1px solid #f0f0f0;
  }
.im-dialog-right
  {
  float:right;
  max-width:85%;
  background-color:#FFFFFF;
  border:1px solid #f0f0f0;
  border-radius: 12px 0 12px 12px;
  padding:12px;
  }
.clearer {clear:both;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="im-dialog">
<div id="showmore-triger" data-page="1" data-max="3"><a href="javascript:void(0);" id="prev-mess">предыдущие сообщения</a></div>

  <div id="im-dialog-prev"></div>

  <div class="im-dialog-left">
      текст текст текст 
  </div>
  <div class="clearer"></div>

  <div class="im-dialog-right">
      текст 2 
  </div>
  <div class="clearer"></div>

  <div class="im-dialog-left">
      текст3 текст4 текст 4
  </div>
  <div class="clearer"></div>

  <div class="im-dialog-right">
      текст 4 
  </div>
  <div class="clearer"></div>

</div>

https://jsfiddle.net/hibinyru/xw3cd8k2/7/

PS。好吧，如果有时间，请告诉我如何使它在当前带有对话框的div中，当您单击“以前的消息”时，它会自动滚动到从ajax打开的块的底部消息？

css

1 个回答

  1. Best Answer

    您正在使用该方法append，该方法将内容添加到块的末尾，但您想将其添加到开头。有一种方法prepend。

    • 1

相关问题