在设定的时间向下滚动聊天，但在用户交互时停用

Posted 2023-05-08

【中文标题】在设定的时间向下滚动聊天，但在用户交互时停用

【英文标题】：Scroll down Chat on set time but deactivate on user interaction

【发布时间】：2015-09-27 14:24:15

【问题描述】：

我正在编写一个网络聊天系统以允许用户向他们的朋友写消息，但我在使用 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”秒后被重定向到页面底部？ 如果用户向上滚动页面并且向下滚动的脚本被阻止，当用户完全向下滚动页面时如何重新激活它？

【问题讨论】：

我在 Google 上搜索了很多指南，但我不太擅长使用 jquery，而且我尝试做的所有事情都没有奏效

感谢戴夫的建议

（Offtopic）你的 DIV 中缺少 <ul> .chatMessages

哦，是的，谢谢 Roko ;-)

我创建了几个聊天小部件，并发明了这种用户界面，当您与可滚动区域交互时 > 将不会滚动。请参阅此答案：***.com/questions/20457294/… 并使用演示。是重复的吗？

【参考方案1】：

在其他实现中，有两种（不错的）方法可以实现您想要的。 第一个是你想要的：

不在底部（用户向上滚动）> 锁定滚动

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

优点：

直观的用户界面

缺点：

在大多数情况下它很酷且直观，但如果用户这样做可能会很烦人 ie：从滚动板上复制消息 - 鼠标离开时，滚动底部可能会阻止用户执行更多操作确切的滚动位置。

【讨论】：

哇，您的代码运行良好，但是，如何提高滚动性能？在手机上非常滞后。我使用了第一个选项。我试图删除下面的帖子，但仍然可见:(