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>

chat.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>";

    }
}

＆GT;

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。

＆＃13;

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

＆＃13;

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

＆＃13;

获取数据后JavaScript滚动

1 个答案: