Как остановить изменение положения прокрутки при обновлении php?

Question

Я пытаюсь загрузить свой код php из базы данных без обновления, используя функцию ajax .load (), в «текстовый» div, который действует как окно обмена сообщениями с переполнением прокрутки. Однако всякий раз, когда происходит перезагрузка, весь div прокручивается обратно наверх, что делает невозможным возврат назад через историю сообщений. Я ищу способ: A) предотвратить эту прокрутку или B) изменить ее, чтобы она обновлялась только при добавлении новой информации в базу данных, а не через заданный интервал. Я пробовал использовать верхнюю прокрутку, но, похоже, это не работает. Эхо выведет положение прокрутки правильно, но установить прокрутку не получится.

$(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, вы можете использовать метод анимации для перемещения окна прокрутки.

Что касается вашей идеи добавлять только новые обновления ... было бы идеально. Вот несколько мест для начала.

• Вам необходимо пересмотреть свой запрос и разметку на стороне сервера, чтобы отвечать только новыми сообщениями, сообщениями через определенное время / или возвращать JSON, чтобы вы могли фильтровать и отображать его на стороне клиента.

• Если вы собираетесь добавлять только новые сообщения в DOM, было бы лучше, если бы ваш сервер отвечал только этой разметкой. В противном случае вам нужно будет проанализировать клиентскую часть HTML, чтобы получить только новый контент.

Что касается обновления с «добавлением» или «добавлением» нового контента в DOM, вы можете использовать методы append / prepend jQuery.

Метод load дает небольшое сокращение для "загрузить это содержимое и заменить содержимое x", если вы хотите придерживаться load , Вы можете сделать что-то вроде

$("#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 минуту бездействия снова установите значение 30 или даже 60 секунд ...