Question

我希望能够将聊天文本始终滚动到聊天的底部。

我已经查看了许多教程并尝试了很多堆栈溢出的例子，但没有一个能够工作。

目前，当有太多行时，我的聊天文字会一直走出textarea，即使我有overflow:hidden。

我还希望textarea只加载数据库中的最后50个条目，这样当用户加入时，他们就不必加载聊天中说的所有内容。

任何想法如何做这两件事？

家

<?php
    session_start();
?>

<!DOCTYPE html>
<html>
<head>
    <div id="Holder">
        <div id="Header"></div>
   <link href="../Style/Style.css" type="text/css" rel="stylesheet"/>

    <script type="text/javascript" src="../Js/jquery.js"></script>
    <title>Chat Home</title>
    <script type="text/javascript">
        $(document).ready(function(){

            $("#ChatText").keyup(function(e){
                //When we press Enter do
                if(e.keyCode==13){
                   var ChatText =  $("#ChatText").val();
                    $.ajax({
                        type:'POST',
                        url:'InsertMessage.php',
                        data:{ChatText:ChatText},
                        success:function(){
                            $("#ChatMessages").load("DisplayMessages.php");
                            $("#ChatText").val("");
                        }
                    })
                }
            });
            setInterval(function(){//refreshes every 1500ms
                $("#ChatMessages").load("DisplayMessages.php");
            },1500);
            $("#ChatMessages").load("DisplayMessages.php");

    </script>
</head>
<body>
<h2>Welcome <span style="color: green"><?php echo $_SESSION['UserName'] ; ?></span> </h2>
</br></br>

<div id="ChatBig">
    <div id="ChatMessages">
    </div>
    <input type="text" id="ChatText" name="ChatText"></textarea>
</div>
<div id="Footer"></div>
</div>
</body>

</html>

的CSS

#ChatBig {
    width: 60%;
    height: 600px;
    margin: auto;
    background-color: white;
    overflow:hidden;
    resize:none;

}
#ChatMessages{
    width: 100%;
    height: 548px;
    border: 1px solid #000;
    font-size: 16px;
    font-weight: normal;
    overflow:hidden;
    resize:none;
}
#ChatText{
    width: 100%;
    height: 50px;
    border: 1px solid #000;
    overflow:hidden;
    resize:none;
}
#ChatText:focus{outline: none;}

body {
    background-color: lightgray;
}
#Holder {
    width: 100%;
}
.UserNameS{
    color: #7CB9E8;
}
.UserNameS:hover{text-decoration:underline; cursor: pointer;}

网站外观的图片

http://gyazo.com/fe71d7d9699b9784fda5ba1c862fad53

Answer 1

如果您不想要滚动，也许您可以使用position: absolute;和position: relative;，就像在此示例中一样

#ChatBig {
    width: 60%;
    height: 600px;
    margin: auto;
    background-color: white;
    overflow:hidden;
    resize:none;
    background: red;
    position: relative;
}
#ChatMessages{
    width: 100%;
    min-height: 498px;
    border: 1px solid #000;
    font-size: 16px;
    font-weight: normal;
    overflow:hidden;
    resize:none;
    position: absolute;
    bottom: 50px;
}
#ChatText{
    width: 100%;
    height: 50px;
    border: 1px solid #000;
    overflow:hidden;
    resize:none;
    position: absolute;
    bottom: 0;
}
#ChatText:focus{outline: none;}

<div id="ChatBig">
    <div id="ChatMessages">
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        asd<br/>
        qwe<br/>
    </div>
    <input type="text" id="ChatText" name="ChatText">
</div>

您需要将container设为position: relative;，然后将该孩子设为absolute。

首先，ChatBig为600px且ChatText为50px，因此将ChatMessages更改为

min-height: 498px; // don't use height
position: absolute;
bottom: 50px; // because ChatText is 50px

然后对于ChatText，将其设置为

position: absolute;
bottom: 0;

在那里，您将在最底层ChatMessages保留

注意：qwe仅用于识别最后一行

Answer 2

您必须添加max-height属性。

.class
{
    max-height: 150px;
    overflow-y: scroll;
}

Answer 3

这一行意味着什么

<input type="text" id="ChatText" name="ChatText"></textarea>

它应该是

<textarea id="ChatText" name="ChatText"></textarea>

或

<input type="text" id="ChatText" name="ChatText"/>

聊天文本自动向下滚动并从数据库加载信息

3 个答案: