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

-5

我有一个基于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;

，但没有奏效。我做错什么了吗？

请告诉我在哪里，我把代码我是小白，感谢

来源

2014-06-25 user3774980

此问题标记为[tag：jquery]，但您似乎并未实际使用jQuery。你是？ jQuery解决方案是否可以接受？如果没有，您应该[编辑]删除该标签。 – TRiG

有些人调整了代码，使其更易于阅读。这意味着问题中的代码可能与您实际使用的代码不完全相同，但如果他们谨慎的话，它应该*是等同的。请查看问题中的代码，并确保您对此感到满意，因为它是对您的代码的准确描述。如果没有，你可以[edit]改变它。 – TRiG

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

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

来源

2014-06-25 11:56:51 Jay

添加至少一点解释，只是抛弃一行代码OP的方式将无济于事。 – vonbrand

是的，请添加一些关于您的代码的信息，以帮助未来登录此页面的其他人，并解释如何/为何解决此问题。 –

谢谢，但我把代码放在哪里，需要我制作新的js ...你能帮我吗？请更多信息，我是noob，对不起我的英语 – user3774980

你必须编辑CSS，加上“最大高度”垂直滚动条，见下图：

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

水平滚动条我加入“包裹”属性与价值'off'：

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

来源

2014-06-25 12:12:47 Faby

-1

好吧，这可能太晚了，但作为一个新手，以及这是我希望它可以帮助别人！

在这里，你去！

$('#yourDiv').ready(function(){ 
    var element = $('#yourDiv')[0] #select element 
    $('#yourDiv').scrollTop(element.scrollHeight) #scroll to scroll-height of the element 

    $("#your-send-button").on('click', function(){ 
    $('#yourDiv').scrollTop(element.scrollHeight) #this scrolls-down when a message is sent 
    }); 

});

来源

2016-11-30 23:03:29 bright

该代码中存在语法错误 – junkfoodjunkie

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

回答

相关问题