javascript - 使用CSS在ajax中聊天div

Question

使用 css 在 ajax 中聊天 div。我正在使用 ajax 构建聊天系统，当聊天文本超过屏幕长度时，新的文本消息倾向于在聊天文本输入表单下方向下滚动而不是向上滚动，因此，除非你向下滚动。以下是我构建 CSS 的方式。任何帮助将不胜感激

JS:

$(document).ready(function() {
    setInterval(function() {
       $.ajax({ 
         type: "POST", 
         url:'chatposts.php',
         data:"uname="+uname,
         success:function(data) {
           $('#chatdisplay').html(data); 
    } }) 

      var elem = document.getElementById('comdisplay');
      elem.scrollTop = elem.scrollHeight;

    }, 10000); 
});

CSS:

.chatdisplay {
   background-color:#FF00FF; 
   min-width:100px;
   height:auto;
   margin-left:56px; 
   padding:10px 0 10px 10px;
   margin-top:1px; 
   font-size:12px; 
   color:#000;
}
#chatbox {
  display:block; 
  bottom:0;  
  margin-left: 0px; 
  position:fixed; 
  width:100%;
}

HTML:

<div id="chatdisplay" >
    Display chat message...
</div>


<div id="chatbox">
   <form action="" method="post" name="chat_form">
      <input name="chat_comment" class="comment" type="text" id="chat_comment">
      <input name="chatBtn" class="chatBtn" id="chatbtn" type="submit" value="Chat" />
   </form>
</div>

PHP:

    <?php
       require('db.php');
       $result = $db->prepare('
       select * from chat where pid=:pid order by cmid');
       $result->execute(array(':pid' => '43'));
       $countcom=$result->rowCount();
       while ($full = $result->fetch()) {
         $cmid=htmlentities($full['cmid'], ENT_QUOTES, "UTF-8");
         $cname1=htmlentities($full['comment'], ENT_QUOTES, "UTF-8");
         $comment_pic2=htmlentities($full['user_pic66'], ENT_QUOTES, "UTF-8");
         $tt=htmlentities($full['c_time'], ENT_QUOTES, "UTF-8");
         $bb=htmlentities($full['user_name66'], ENT_QUOTES, "UTF-8");
    ?>
    <div id="chatdisplay<?php echo $cmid;?>" class="chatdisplay" >
    <img width="20" height="20" src='http://localhost/sri_chat/db/photo/<?php echo $comment_pic2;?>' /> 
    &nbsp;

   <?php 
     echo $bb;
   ?>: &nbsp;<?php echo $cname1;?>


    </div>

    <?php }?>

Answer 1

我认为纯 CSS 不可能做到这一点。但是您可以使用 JavaScript 来完成。

示例:

HTML:(与您的有点不同，但概念相同)

<div class="message">
    <p>This was the first message</p>
    <p>Another message</p>
    <p>A third message about something a bit longer</p>    
</div>

<button>New message</button>

JS:(我在这个例子中使用了 jQuery)

var button = $('button');
var container = $(".message");

button.on('click', function() {
    container.append('<p> A new message</p>');
    container.scrollTop(container[0].scrollHeight);
});

演示:

http://jsfiddle.net/u4u33286/3/