Php 如何在加载内容时保持div的滚动位置稳定

我有一个div收件箱聊天，其中包含使用ajax从数据库检索到的数据。内容每5秒重新格式化一次。 div有一个滚动条。这里的问题是当刷新div以加载新数据时，滚动条会转到顶部，然后用户无法读取div内容底部写的内容

内容在这里加载

messages.php

我将此css用于收件箱聊天类

从这里看一下div

---

这是因为您正在用$inbox.htmldata；替换inbox元素的全部内容

替换之前，请使用var scroll=$inbox[0]保存滚动位置；替换后，使用$inbox[0]将其还原。scrollTop=scroll

我不知道您是否正在调整整个消息历史记录，或者仅调整10条最新消息，以及更新的消息是否在末尾或开头，但您可能需要计算新元素的高度，并将其添加/减去滚动值

编辑：

顺便说一句，为什么你要每5秒钟调整一次所有消息，而不仅仅是新消息，并在现有消息旁边追加或预加它们？这将消除存储和恢复滚动位置的需要

将消息id添加到每个消息中，并使用一个类来选择它们：

            <li class="message me" data-messageid="65">
                <div class="avatar-icon">                       
                    <img src="http://simpleicon.com/wp-content/uploads/user1.png">
                </div>
                <div class="messages">
                        <p>Hi buddy !</p>
                </div>
            </li> 

在PHP中：

$uid  = $_GET['sender_id'];
$uid  = get_username_id($_GET['sender_id']);
$newest_msg = $_GET['newest_msg'];
$stmt = $PDO->prepare("SELECT * FROM `forum_inbox` 
    WHERE 
        (sender_id=? AND receiver_id=?) 
    OR 
        (sender_id=? AND receiver_id=?) 
    AND 
        message_id > {$newest_msg}
    ORDER BY dateMsg DESC
");

请注意，我只选择id大于最新消息的消息。

类似的内容

var refreshId = setInterval(function()
{
    $container.load('ajax/inbox.php?sender_id='+sender_id);
    $(".chat-box").css("height", "auto");
    var height = $(".chat-box").height();
    $(".chat-box").css("height", 450);
    $(".chat-box").scrollTop(height);   

}，10000

---

替换此函数。

我已经编辑了ajax/inbox.php，如何操作？请提供任何建议，谢谢@Oksanen，但我想我需要刷新div以获取其他用户的最新消息！我在这里看不到setinterval函数！很明显，我不会为您编写整个代码-这不是Stackoverflow的用途。我只是写了最重要的部分，这样你就可以了解如何做的基本想法。从那里你可以算出剩下的时间，就像你已经做对的时间间隔一样。我不知道你所说的其他用户的消息是什么意思。你没有详细说明你的应用程序是如何工作的，或者你的数据库是如何构造的，但是通过对你的sql查询进行一些修改，你应该能够实现我的建议。是的，是的，非常感谢你，我的糟糕！非常感谢你的帮助！我很感激：谢谢你的帮助，但是使用你提供给我的代码，当div刷新时，滚动条会转到底部，然后回到顶部，如何使它始终保持在它的位置？

#inbox-chat  .chat-container {
    width: 100%;
    margin: 10px auto;    
    height: 450px;    
    background-color: #FAFCFB;

}

#inbox-chat  .chat-box {
    list-style: none;
    background: #fdfdfd;
    margin: 0;
    padding: 0 0 50px 0;
    height: 100%;
    overflow-y: auto;

}

#inbox-chat  .chat-box li {
    padding: 0.5rem;
    overflow: hidden;
    display: flex;
}

#inbox-chat  .chat-box .avatar-icon {
    width: 50px;
    position: relative;
}

#inbox-chat  .chat-box .avatar-icon img {
    display: block;
    width: 100%;
    background-color:#fff;
    padding: 3px;
    border-radius:50%;
}

#inbox-chat  .me {
    justify-content: flex-end;
    align-items: flex-end;
}

#inbox-chat  .me .messages {
    order: 1;
    border-bottom-right-radius: 0;
  }

#inbox-chat  .me .avatar-icon {
    order: 2;
}
#inbox-chat  .messages {
    background: white;
    padding: 10px;
    border-radius: 2px;    
    width: 80%;
    border: 1px solid #c9cccd;
    color:#424242;
}

#inbox-chat  .messages p {
    font-size: 13px;
    margin: 0 0 0.2rem 0;
}

#inbox-chat  .messages time {
    font-size: 0.7rem;
    color: #ccc;
}

            <li class="message me" data-messageid="65">
                <div class="avatar-icon">                       
                    <img src="http://simpleicon.com/wp-content/uploads/user1.png">
                </div>
                <div class="messages">
                        <p>Hi buddy !</p>
                </div>
            </li> 

var sender_id = $(".u").val(); 
var newest_msg=$(".message:last").data("messageid");
$.ajax({
    url : 'ajax/inbox.php',
    data : {
        sender_id: sender_id,
        newest_msg: newest_msg
    },
    success : function(data){   
        $("#inbox").append(data); //append it, not replace
    }
});

$uid  = $_GET['sender_id'];
$uid  = get_username_id($_GET['sender_id']);
$newest_msg = $_GET['newest_msg'];
$stmt = $PDO->prepare("SELECT * FROM `forum_inbox` 
    WHERE 
        (sender_id=? AND receiver_id=?) 
    OR 
        (sender_id=? AND receiver_id=?) 
    AND 
        message_id > {$newest_msg}
    ORDER BY dateMsg DESC
");

var refreshId = setInterval(function()
{
    $container.load('ajax/inbox.php?sender_id='+sender_id);
    $(".chat-box").css("height", "auto");
    var height = $(".chat-box").height();
    $(".chat-box").css("height", 450);
    $(".chat-box").scrollTop(height);