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

Question

我有一个 div (inbox-chat)，其中包含使用 ajax 从数据库检索的数据。内容每 5 秒刷新一次。div 有一个滚动条。这里的问题是当div刷新加载新数据时，滚动条到顶部，然后用户无法阅读div内容底部写的内容。

内容加载到这里

messages.php

<div id="inbox">
    <img src="assets/images/loaders/preload.gif" class="loading_inbox" >
</div>

这里是一个HTML代码的例子

ajax/inbox.php (EIDTED)

<?php
 ob_start();
 session_start();
    require_once '../../config/connect.php';
    require_once '../../functions/func.php'; 

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

$stmt->execute(array($uid, $_SESSION['id_userf'], $_SESSION['id_userf'], $uid));    
$messages = $stmt->fetchAll(PDO::FETCH_OBJ);

 ?>

 <?php if($stmt->rowCount() != 0): // STARTS CHECK IF ANY RECORDS EXISTS IN INBOX TABLE ?>
<div id="inbox-chat">
    <section class="chat-container">
        <ol class="chat-box">
            <div class="new-msg"></div>
            <?php 
                foreach($messages AS $msg): 

                    if(get_username($msg->sender_id) == $_SESSION['usernamef']){
                        $direction = 'another';
                    }else{
                        $direction = 'me';
                    }
             ?> 
                <li class="<?php echo $direction ?>">

                    <div class="avatar-icon">
                        <a title="Voir profil de <?php echo get_username($msg->sender_id); ?>" href="profil.php?user=<?php echo get_username($msg->sender_id) ?>&pane=profile">
                        <img src="assets/images/profiles/<?php echo get_user_profile_pic($msg->sender_id)?>">
                        </a>
                        </div>

                        <div class="messages">
                        <p><?php echo $msg->message ?></p>
                        <time datetime="<?php echo convert_date_format_full(convert_timestamp($msg->dateMsg));?>">
                            <?php echo time_stamp($msg->dateMsg);?>
                            <i class="fa fa-clock-o"></i> <?php echo convert_date_format_full(convert_timestamp($msg->dateMsg)); ?>
                        </time>
                    </div>
                </li>               
            <?php endforeach; ?>          
          </ol>
    </section>
</div>
 <?php else: ?>    
    <div class="panel-body" style="width:50%; margin:5px auto;text-align:center;">
        <div class="media v-middle">
            <h2>Pas de message</h2>
           <img src="assets/images/no-msg.png">
        </div>
    </div> 
 <?php endif; // ENDS CHECK IF ANY RECORDS EXISTS IN INBOX TABLE ?>  

js 文件 (inbox.js)

$(document).ready(function(){

    var sender_id = $(".u").val(); 
    var $container = $("#inbox");
    $.ajax({
        url : 'ajax/inbox.php',
        data : 'sender_id='+sender_id,  
        before : function(){
            $(".loading_inbox").show();
        },
        success : function(data){   
            $(".loading_inbox").hide();
            $("#inbox").html(data);
        }
    });

    var refreshId = setInterval(function()
    {
        $container.load('ajax/inbox.php?sender_id='+sender_id);
    }, 10000);  
});

我将此 CSS 用于 inbox-chat 类

#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;
}

从这里看一下div

http://jsfiddle.net/devstar/rgjfqsb2/

Answer 1

那是因为您要用 $("#inbox").html(data); 替换收件箱元素的全部内容。

替换前，用 var scroll=$("#inbox")[0].scrollTop; 保存滚动位置，替换后用 $("#inbox")[0].scrollTop=滚动;.

我不知道您是在加载整个消息历史记录，还是只加载 10 条最新消息，以及较新的消息是在末尾还是在开头 - 但您可能需要计算新元素的高度并添加/将它减去/从滚动值中减去。

---

编辑:

顺便说一句，为什么您要每 5 秒对所有消息进行 ajax，而不仅仅是新消息和 append 或 prepend 现有消息旁边的消息？这将消除存储和恢复滚动位置的需要。

将消息 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 处理程序:

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

在你的 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 大于最新消息的消息。