Question

我有一个基于MySQL的聊天系统，我希望滚动条位于消息div的底部

这是我的代码：

的index.php

<?php session_start(); ?> 
<html> 
    <head> 
        <link rel="stylesheet" href="css/styles.css"/>     
    </head> 
    <body> 

        <div id="container"> 

        <div id="messages"> 
        </div> 

        <div id="senddiv"> 
            <textarea id="message" rows="9" cols="97" style="background-color: yellow;"></textarea> <input type="button" onClick="sendMessage()" value="Send" style="height:50px; width:800px; background-color: blue;"> 
        </div> 
        <div id="login"> 
            Username: <input type="text" id="username" size="16" value="anonymous"> <input type='button' value='Submit' onClick='login()'> 
        </div> 

        </div> 

        <script type="text/javascript" src="js/jquery.js"></script> 
        <script type="text/javascript" src="js/showMessages.js"></script> 
        <script type="text/javascript" src="js/postMessage.js"></script> 
        <script type="text/javascript" src="js/signinout.js"></script> 
        <script type="text/javascript" src="js/scroll.js"></script> 

    </body> 
</html>

styles.css

body{ 
    font-family: Tahoma; 
    font-size: 15px; 
} 
#container{ 
    height: 453px; 
    width: 800px; 
    border: 1px solid black; 
} 
#messages{ 
    overflow-y: scroll; 
    height: 300px; 
    border-bottom: 1px solid black; 
} 
textarea { 
    resize:none; 
}

我有很多PHP和javascript文件。

发送消息时，滚动条位于底部。

我尝试使用此代码：

  var messages = document.getElementById('messages'); 
  messages.scrollTop = messages.scrollHeight;

但它不起作用。我做错了吗？

请告诉我我把代码放在哪里我是菜鸟，谢谢

Answer 1

试试这个。如果您使用jQuery，这会更容易。

$("#yourDiv").scrollTop($("#yourDiv").prop('scrollHeight'))

Answer 2

你必须编辑css，为垂直滚动条添加“max-height”，见下文：

#container{ 
   height: 453px; 
   width: 800px; 
   border: 1px solid black;
   max-height: 100px;
}

对于水平滚动条，我添加了'wrap'属性，其值为'off'：

<textarea id="message" wrap='off' rows="9" cols="97" style="background-color: yellow;"></textarea>

Answer 3

我尝试以下代码，并且运行良好。尝试一下，将滚动条设置为自动底部。

$("#messagebox").scrollTop($("#messagebox")[0].scrollHeight);

如何在聊天中将滚动条位置设置为底部？

3 个答案: