javascript - 使div的内容向下滚动并溢出

Question

我为我正在做的元素创建了一个小型聊天系统。聊天功能正常。但是，我不知道如何使 div 停留在聊天的底部，而不是必须向下滚动才能阅读某人说的最后一句话。

我指的是此处发布的另一个类似问题以供指导。 How to keep a div scrolled to the bottom as HTML content is appended to it via jquery, but hide the scroll bar?

但它仍然不适合我。然后聊天记录存储在 chat.txt 文件中。每行都被标签包围。以下是我正在使用的代码。

标题中的js:

$container = $('#chat-area');
$container[0].scrollTop = $container[0].scrollHeight;

$('#sendie').keypress(function (e) {
  if (e.which == 13) {
    $container = $('#chat-area');
    $container.append('<p>' + e.target.value + '</p>');
    $container.animate({ scrollTop: $container[0].scrollHeight }, "slow");
  }
}); 

聊天.php:

<script type="text/javascript">


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

                }   


              }
         });

    });
</script>

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

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

</div>

CSS:

#pageWrap
{

    position: fixed;
    display: block;
    right: 0;
    bottom: 0;
    background: #8B1918;
    box-shadow: 0px 0px 12px #333;
    transition: height .5s;
}

#pageWrap p
{
    color: white;
    font-family: arial;
    margin-left: 5px;
    margin-bottom: 4px;
}

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

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

#sendie
{
    resize: none;
    display: block;
    width: 92%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 6px;
}

Answer 1

我得到它(部分)为你工作。以下是我发现的问题:

• 尽量不要命名以 $ 开头的变量 - 它会造成不必要的混淆。
• 您没有将 $container 声明为 var，因此您在声明它之前使用了一个变量。
• jQuery 支持 99% 的纯 Javascript 功能，而且还做得更好。在可能的情况下，我更改了您的代码以改用 jQuery。
• 我不确定 e.target.value，但 $('#sendie').val() 也可以。
• 您绝对需要将其包装在主体 onload 函数中。
• 您想在事件处理程序中添加 e.preventDefault();，这样它就不会在框中放置回车符。
• 您没有清除输入文本区域(使用 jQuery 它只是 $('#sendie').val('');)。
• 聊天消息区域的字体颜色是白色的(至少在 JSFiddle 上是这样)。因此，消息是不可见的。

这是一个演示一切正常的 fiddle (据我所知)- http://jsfiddle.net/U9XAv/

这是更新后的 Javascript:

$(function()
{
    var container = $('#chat-area');
    container.css('scrollTop', container.css('scrollHeight'));

    $('#sendie').keydown(function (e)
    {
        if (e.which == 13)
        {
            container.append('<p>' + $(this).val() + '</p>')
                     .animate({ scrollTop: container[0].scrollHeight) }, "slow");
            $(this).val('');
            e.preventDefault();      
        }
    });
});

我更改的 CSS:

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