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 file （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  .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=scroll;将其恢复。

我不知道您是否记录了整个邮件历史记录，或者只知道最新的10条邮件以及更新的邮件是否在最后或开头 - 但您可能需要计算新邮件的高度元素并在滚动值中添加/减去它。

修改

顺便说一下，为什么你每隔5秒钟就会收到所有邮件，而不只是新邮件，而现有邮件旁边是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大于最新消息的消息。

Answer 2

这样的事情？

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）;

替换此功能。

如何在加载内容

2 个答案: