使用 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/

Answer 2

解决问题的最佳方法是颠倒您将消息放入框中的方式（最新在顶部），但如果您希望它们在底部。

var chatBox = document.getElementById("chatdisplay");
chatBox.scrollTop = chatBox.scrollHeight;

应该这样做。

http://www.w3schools.com/jsref/prop_element_scrolltop.asp 有关 Dom 属性的更多信息

*Kris 打败了我