我正在编写一个Web聊天系统,以允许用户向其 friend 写消息,但是使用jquery向下滚动新消息时遇到问题。

我有这些文件:messages.php,用于存储提交和查看邮件的表单;chatupd.js执行发布和获取消息,并每隔“x”秒刷新一次div;post_updmsg.php将消息打印到数据库;get_updmsg.php从数据库获取最新消息;

但是,此问题所需的唯一文件是前两个文件:
messages.php

<div class='chatContainer'>
    <div class='chatHeader'>
        <h3>Welcome <?php echo get_talkm3_nome(); ?></h3>
    </div>
    <div class='chatMessages'>
        <?php
include '../core/config.inc.php';
$db = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$id_usr_2 = $_SESSION['email'];
//Get Messages
$query = $db->prepare("SELECT * FROM `chat_t3`");



$query->execute();

            //Fetch
while ($fetch = $query->fetch(PDO::FETCH_ASSOC))
{
    $id_usr_2 = $fetch['id_usr_2'];
$id_usr_1 = $fetch['id_usr_1'];
    $text = $fetch['text'];
    $date = $fetch['date'];
    if ($id_usr_1 == $_SESSION['email']){
    echo "<li class='message_container'><div class='sender'>From - <b>".ucwords($id_usr_1)."</b> TO - ".ucwords($id_usr_2)."</b> - ".$text." ".ucwords($date)."</div></li> ";
    } else {
    echo "<li class='message_container'><div class='reader'>From - <b>".ucwords($id_usr_1)."</b> TO - ".ucwords($id_usr_2)."</b> - ".$text." -".ucwords($date)."</div></li> ";
}
}
        ?>
    </div>
    <div class='chatBottom'>
        <form action='#' onSubmit='return false;' id='chatForm'>
        <input type='hidden' id="id_usr_1" value="<?php echo get_talkm3_email() ?>"><br />
        <input type='text' id='id_usr_2' value="" placeholder="inserisci la mail del destinatario" />
        <input type='text' name='text' id='text' value='' placeholder='Type your message'>
        <input type='submit' name='submit' value='Post'>
        </form>
        <br>

    </div>
</div>
chatupd.js
$(function(){
    $(document).on('submit', '#chatForm', function(){
        var id_usr_1 = $.trim($("#id_usr_1").val());
        var id_usr_2 = $.trim($("#id_usr_2").val());
        var text = $.trim($("#text").val());

        if (id_usr_1 != "" && id_usr_2 != "" && text != ""){
            $.post('../core/chat/post_updmsg.php', {id_usr_1: id_usr_1, id_usr_2: id_usr_2, text: text}, function(data){
                $(".chatMessages").append(data);
            });
        } else {
            alert("Data Missing");
        }
    });

    function getMessages (){
        $.get('../core/chat/get_updmsg.php', function(data){
            $(".chatMessages").html(data);
        });
    }

    setInterval(function(){
        getMessages();
    }, 1000);
});

现在,我的问题是:
  • 如何自动向下滚动页面以显示最新消息?但是,如果用户希望查看旧消息并向上滚动页面,是否防止在“x”秒后将其重定向到页面底部?
  • 如果用户向上滚动页面并且阻止了向下滚动的脚本,那么当用户完全向下滚动页面时如何重新激活它?
  • 最佳答案

    在其他实现中,有两种(不错)的方法可以实现您想要的。
    第一个是您想要的:

    不在底部(用户向上滚动)>锁定滚动

    jsBin demo

    如果用户滚动消息>在新消息到达时不要滚动到底部:

    var $chat = $(".chatMessages");
    var chatHeight = $chat.innerHeight();
    var c = 1;
    var chatIsAtBottom = true;
    
    
    function newMessage() {
      $chat.append("<li>This is message "+ (c++) +"</li>");
      if(chatIsAtBottom){
        $chat.stop().animate({
          scrollTop: $chat[0].scrollHeight - chatHeight
        },600);
      }
    }
    
    function checkBottom(){
      chatIsAtBottom = $chat[0].scrollTop + chatHeight >= $chat[0].scrollHeight;
    }
    
    $chat.scrollTop( $chat[0].scrollHeight ).on("scroll", checkBottom);
    setInterval( newMessage, 2000 );
    
  • 优点:其他事件不会干扰当前用户定义的滚动位置。
  • 缺点:在此示例中,在离开“消息”滚动区域时,您需要通知用户“[[新未读消息]”>,然后单击该滚动回到底部。

  • 悬停/关注评论区域>切换锁定滚动

    jsBin demo

    另一个与this old post of mine有关,它执行以下操作:

    如果用户将消息悬停在消息区域(逻辑上,他是:1.滚动,阅读,复制一些旧文本等……进行交互:))-比防止滚动
    var $chat = $(".chatMessages");
    var chatHeight = $chat.innerHeight();
    var c = 1;
    
    function newMessage() {
      $chat.append("<li>This is message "+ (c++) +"</li>");
      if(!$chat[0].noScroll) {
        $chat.stop().animate({scrollTop: $chat[0].scrollHeight-chatHeight},600);
      }
    }
    
    $chat.hover(function() {
      return this.noScroll ^= 1;
    });
    
    $chat.scrollTop( $chat[0].scrollHeight );
    setInterval( newMessage, 2000 );
    
  • 优点:简单易用的用户界面
  • 缺点:在大多数情况下,它很酷且直观,但是如果用户在以下位置,可能会很烦人:从该滚动板上复制一条消息-将鼠标移到鼠标底部时,可能会阻止用户对该确切的滚动位置执行更多操作。
  • 10-05 20:17
    查看更多