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

chat.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支持使用普通Javascript可以做的所有事情的99％，但使它更好。在可能的情况下，我将代码更改为使用jQuery。
我不确定e.target.value，但$('#sendie').val()同样适用。
你肯定需要将它包装在body onload函数中。
您希望在事件处理程序中添加e.preventDefault();，以便它不会在框中放置返回字符。
您没有清除输入textarea（使用jQuery只是$('#sendie').val('');）。
聊天消息区域的字体颜色是白色的（至少在JSFiddle上是这样）。由于这个原因，消息是不可见的。

这是一个演示一切正常工作的小提琴（据我所知） - 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;
}

div的内容向下滚动溢出

1 个答案: