刷新 php 时如何停止滚动位置的变化？

Question

我正在尝试使用 ajax .load() 函数从数据库中加载我的 php 代码而不刷新，并将其加载到 'text' div 中充当带有滚动溢出的消息框。但是，无论何时发生重新加载，整个 div 都会滚动回顶部，从而无法返回消息的历史记录。我正在寻找一种方法来 A) 防止滚动发生或 B) 更改它以便它仅在将新信息添加到数据库时更新，而不是在设定的时间间隔内更新。我试过使用 scroll top 但它似乎不起作用。 echo会正确输出scroll位置，但是设置scroll就不行了

$(document).ready(function() { 
setInterval(function () {
    var loc = $('#".$recipient." > .text').scrollTop();
    console.log(loc);
    $('#".$recipient."').load('update.inc.php', {
            roomID: ".$roomID.",
            recip: '".$recName."'
        });
    $('.text').scrollTop(loc);
    }, 1000);
});

我的PHP更新代码是这样的：

<?php
include("dbh.inc.php");
session_start();

$roomID = $_POST['roomID'];
$recName = $_POST['recip'];

echo "<div class = 'info'>";
echo "<a href = 'social.php'><i class='fas fa-long-arrow-alt-left'></i></a>";
echo "<div class = 'recipient-info'>";
echo "<div class = 'user-img'></div>";
echo "<h4 class = 'username'>".$recName."</h4>";
echo "</div>"; //End recipient-info
echo "</div>"; //End info
echo "<div class = 'text'>";

$getMessages = "SELECT * FROM chatroom_posts WHERE roomId = '$roomID' ORDER BY postTime ASC";
$messages=$conn->query($getMessages);
if($messages->num_rows > 0) {
    while($message=$messages->fetch_assoc()) {
        if($message['userId']==$_SESSION['uid']) {
            echo "<p class = 'to'>".$message['content']."</p>";
        } else {
            echo "<p class = 'from'>".$message['content']."</p>";
        }
    }
} else {
    echo "<p class ='from'>You haven't yet talked to me! Enter a message to get started!</p>";
}
echo "</div>"; //End text

Answer 1

好吧，至于滚动位，使用JQuery你可能想使用动画方法，移动滚动window。

至于你的想法是只添加新的更新......那将是理想的。这里有一些地方可以开始。

您需要修改服务器端的查询和标记，以仅响应新消息、特定时间后的消息/或 return JSON，这样您就可以过滤并在客户端呈现。
如果您打算仅将新消息附加到 DOM，那么您的服务器最好只响应该标记。否则，您将需要解析 HTML 客户端以获取新内容。

至于使用“附加”或“前置”新内容更新到 DOM，您可以使用 jQuery 的 append/prepend 方法

加载方法，提供了一点shorthand用于“加载此内容，并替换x的内容”，如果你想坚持加载，你可以这样做

$("#messages-list").append($("<div>").load('update.inc.php', {...}).html());

它不是特别优雅而且可能很浪费，但更简洁、也许更明确的解决方案是

$.ajax({ type: "GET",   
     url: "update.inc.php",   
     success : function(messages)
     {
         $('#messages-list').append(messages);
     }
});

此外，您的 setInterval 可能有点激进，每秒轮询一次您的服务器，这可能很粗糙，对于一个用户来说可能不是，但是随着会话数量的增加，您将开始轰炸的不仅仅是您的 HTTP 服务器，但是您的 SQL 服务器也是如此。 5、10甚至30秒间隔，都可以。

你甚至可以尝试轮询延迟，将其动态设置为 30 秒，然后在用户发送消息后，将延迟减少到每 5 秒，然后在 1 分钟没有 activity , 将其设置回 30 甚至 60 秒...

刷新 php 时如何停止滚动位置的变化？

How can I stop changes in scroll position when refreshing php?

javascript

php

messaging

jquery

scroll