JavaScript 获取数据后滚动

Question

我正在使用 JavaScript、PHP 和 MySQL 进行网络聊天，我的想法是使用 chat.php 从数据库中获取信息并将其显示在 <ol id ="chat_body" class="chat"></ol>与 <li class="other"></li> 。 问题是，如果我将 $.ajax 与 setInterval 一起使用，我无法将滚动条滚动到最后一条消息。 我尝试了这个但不起作用

var refreshMessages = function() {
$.ajax({
url: 'chat.php',
type: 'GET',
dataType: 'html'
})
//Check If Last Message Is In Focus
var checkFocus = function() {
var container = $('#chat_body');
var height = container.height();
var scrollHeight = container[0].scrollHeight;
var st = container.scrollTop();
var sum = scrollHeight - height - 32;
if(st >= sum) {
    return true;
} else {
    return false;
}
}
.done(function(data) {
if(checkFocus()) {
    $('#chat_body').html(data);
    scrollDownChat();
} else {
   $('#chat_body').html(data);
}
</script>

聊天.php

<?php include "../connection.php";?>
<?php session_start();?>
<?php
$de_id = $_SESSION['ID'];
$chat = $_SESSION['para'];
$get_para_id = "SELECT id FROM users where username = '$chat'";
$get_para_id_con = $connect->query($get_para_id);
$get_para_id_result = $get_para_id_con->fetch_assoc();
$para_id = $get_para_id_result['id'];
$obtermensagens = "SELECT * FROM mensagens";
$obtermensagens_con = $connect ->query($obtermensagens);

while ($r = $obtermensagens_con->fetch_assoc()){
    if ($r['de_id'] == $de_id and $r['para_id'] == $para_id){
        echo "
            <li class='self'>
                <div class='avatar'><img src='https://i.imgur.com/DY6gND0.png' draggable='false'/></div>
                <div class='msg'>
                    <p>$r[conteudo]</p>
                <time>20:17</time>
                </div>
            </li>";
    }       
    elseif ($r['de_id'] == $para_id and $r['para_id'] == $de_id){
        echo "
            <li class='other'>
                <div class='avatar'><img src='https://i.imgur.com/DY6gND0.png' draggable='false'/></div>
                <div class='msg'>
                    <p>$r[conteudo]</p>
                    <time>20:17</time>
                </div>
            </li>";

    }
}   

？>

Answer 1

我结合了以下技术 How to tell if a DOM element is visible in the current viewport? 和 How do I get an element to scroll into view, using jQuery?

得到我认为你想要的东西。本质上，每次附加消息时，您都需要检查该消息是否可见，如果不可见，则需要检索它的位置并滚动到它。如果您将这些消息放在一个溢出的容器中，那么您将使用它而不是 html/body。

var messageNumber = 1;
(function(window, document, undefined)
{
  addMessage();
})(window, window.document);


function addMessage()
{
  var chatList = document.getElementById('chat');
  var newMessage = '<li>Message ' + messageNumber + '</li>';
  var lastMessage;
  var messageCount;
  var pos;
  
  chatList.insertAdjacentHTML('beforeend', newMessage);
  messageCount = chatList.children.length;
  lastMessage = chatList.children[messageCount - 1];
  
  if (!isElementInViewport(lastMessage)) {
    pos = $(lastMessage).offset();
    $('html, body').animate({
      scrollTop: pos.top,
      scrollLeft: pos.left
    });
  }
  
  messageNumber++;
  if (messageCount < 50) {
    setTimeout(addMessage, 300);
  }      
}

function isElementInViewport (el)
{

    //special bonus for those using jQuery
    if (typeof jQuery === "function" && el instanceof jQuery) {
        el = el[0];
    }

    var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= $(window).height() &&
        rect.right <= $(window).width()
    );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol id="chat"></ol>