javascript - jQuery scrollTop 不滚动到最后一个 child

Question

我正在创建一个聊天系统。我希望发生的是当 div 开始溢出时，强制它停留在最后一个

元素上。我在这里尝试了其他问题的一些建议，但仍然无法正常工作。在 #chat-area 中，我使用 ajax 来显示 chat.txt 文件。当您在#sendie 文本区域中键入文本并按回车键时，它会将您输入的文本附加到 chat.txt 文件中。 chat.txt 中的每个条目都有一个 <p>标签自动添加到它。所以我需要它只停留在最后<p>

这是我目前所在的位置:

HTML:

<div id="chatWrap"><div id="chat-area"></div></div>

<form id="send-message-area">
    <p>Your message: </p>
    <textarea id="sendie" maxlength = '200' ></textarea>
</form>

</div>

JS:

$(document).ready(function() {
    $('#chatWrap').animate({
        scrollTop: $('#chat-area p:last-child').position().top
    }, 1000);
});

CSS:

#chatWrap
{
width: 200px;
height: 200px;
box-shadow: 1px 1px 10px #333 inset;
color: white;
font-family: arial;
font-size: 14px;
overflow: auto;
}

#chat-area
{
padding-left: 11px;
}

#chat-area p:nth-child(even)
{
background: #961B10;
margin-left: -8px;
padding-left: 14px;
padding-top: 9px;
padding-bottom: 9px;
margin-top: 1px;
margin-bottom: -1px;
}

编辑:

输出如下:

<div id="chatWrap">
    <div id="chat-area">
        <p>Guest:hi </p>
        <p>Guest:hello </p>
        <p>Guest:Hey </p>
        <p>Guest:Hi </p>
        <p>Guest:Hello </p>
        <p>Guest:Hey </p>
        <p>Guest:Hi </p>
    </div>
</div>
<form id="send-message-area">
    <p>Your message: </p>
    <textarea id="sendie" maxlength="200"></textarea>
</form>

以下是AJAX:

var instanse = false;
var state;
var mes;
var file;

function Chat () {
    this.update = updateChat;
    this.send = sendChat;
    this.getState = getStateOfChat;
}

//gets the state of the chat
function getStateOfChat(){
if(!instanse){
     instanse = true;
     $.ajax({
           type: "POST",
           url: "process.php",
           data: {  
                    'function': 'getState',
                    'file': file
                    },
           dataType: "json",

           success: function(data){
               state = data.state;
               instanse = false;
           },
        });
}    
}

//Updates the chat
function updateChat(){
 if(!instanse){
     instanse = true;
     $.ajax({
           type: "POST",
           url: "process.php",
           data: {  
                    'function': 'update',
                    'state': state,
                    'file': file
                    },
           dataType: "json",
           success: function(data){
               if(data.text){
                    for (var i = 0; i < data.text.length; i++)          {
                        $('#chat-area').append($("<p>"+ data.text[i] +"</p>"));
                    }                                 
               }
               document.getElementById('chat-area').scrollTop =        document.getElementById('chat-area').scrollHeight;
               instanse = false;
               state = data.state;
           },
        });
 }
 else {
     setTimeout(updateChat, 3000);
 }
}

//send the message
function sendChat(message, nickname)
{       
updateChat();
 $.ajax({
       type: "POST",
       url: "process.php",
       data: {  
                'function': 'send',
                'message': message,
                'nickname': nickname,
                'file': file
             },
       dataType: "json",
       success: function(data){
           updateChat();
       },
    });
}

进程.php:

<?php

$function = $_POST['function'];

$log = array();

switch($function) {

     case('getState'):
         if(file_exists('chat.txt')){
           $lines = file('chat.txt');
         }
         $log['state'] = count($lines); 
         break; 

     case('update'):
        $state = $_POST['state'];
        if(file_exists('chat.txt')){
           $lines = file('chat.txt');
         }
         $count =  count($lines);
         if($state == $count){
             $log['state'] = $state;
             $log['text'] = false;

             }
             else{
                 $text= array();
                 $log['state'] = $state + count($lines) - $state;
                 foreach ($lines as $line_num => $line)
                   {
                       if($line_num >= $state){
                     $text[] =  $line = str_replace("\n", "", $line);
                       }

                    }
                 $log['text'] = $text; 
             }

         break;

     case('send'):
      $nickname = htmlentities(strip_tags($_POST['nickname']));
         $reg_exUrl = "/(http|https|ftp|ftps)\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(\/\S*)?/";
          $message =($_POST['message']);
     if(($message) != "\n"){

         if(preg_match($reg_exUrl, $message, $url)) {
            $message = preg_replace($reg_exUrl, '<a href="'.$url[0].'" target="_blank">'.$url[0].'</a>', $message);
            } 


         fwrite(fopen('chat.txt', 'a'), "". $nickname . ":" . $message = str_replace("\n", " ", $message) . "\n"); 
     }
         break;

}

echo json_encode($log);

?>

header 中的脚本:

// strip tags
    name = name.replace(/(<([^>]+)>)/ig,"");

    // display name on page
    $("#name-area").html("You are: <span>" + name + "</span>");

    // kick off chat
    var chat =  new Chat();
    $(function() {

         chat.getState(); 

         // watch textarea for key presses
         $("#sendie").keydown(function(event) {  

             var key = event.which;  

             //all keys including return.  
             if (key >= 33) {

                 var maxLength = $(this).attr("maxlength");  
                 var length = this.value.length;  

                 // don't allow new content if length is maxed out
                 if (length >= maxLength) {  
                     event.preventDefault();  
                 }  
              }  
});
         // watch textarea for release of key press
         $('#sendie').keyup(function(e) {   

              if (e.keyCode == 13) { 

                var text = $(this).val();
                var maxLength = $(this).attr("maxlength");  
                var length = text.length; 

                // send 
                if (length <= maxLength + 1) { 

                    chat.send(text, name);  
                    $(this).val("");

                } else {

                    $(this).val(text.substring(0, maxLength));

                }   


              }
         });

    });

再次编辑:

所以我发现错误在哪里了。

// kick off chat
    var chat =  new Chat();
ERROR: Chat is not defined
    $(function() {

Answer 1

试试这个函数:

$('#chatWrap').animate({
    scrollTop: $('#chat-area').height()
}, 1000);
})

根据@Leo http://jsfiddle.net/qB3m7/4/ 的 fiddle 检查这个演示