无法修复聊天框底部的滚动条（div）

我正在处理聊天应用程序。在加载我的PHP文件时，我想修复div底部的滚动条。我已经写了脚本来做到这一点。我正在使用CSS ID访问它，但我无法使它工作。无法修复聊天框底部的滚动条（div）

代码

//Css part 
<style> 
.msg-wgt-body { 
height: 300px; 
overflow-y: scroll;} 
</style> 

<script> 
$(".1").scrollTop($('.1').height()) 
</script> 

<div class="container" style="border: 1px solid lightgray;"> 
<div class="msg-wgt-header"> 
<a href="#">Kaps</a> 
</div> 
<div class="msg-wgt-body" id="1"> 
<table> 
<?php 
if (!empty($messages)) { 
foreach ($messages as $message) { 
$msg = htmlentities($message['message'], ENT_NOQUOTES); 
$user_name = ucfirst($message['username']); 
$sent = date("F j, Y, g:i a", strtotime($message['sent_on'])); 

echo <<<MSG 
      <tr class="msg-row-container"> 
      <td> 
       <div class="msg-row"> 
       <div class="avatar"></div> 
       <div class="message"> 
     <span class="user-label"><a href="#" style="color: #6D84B4;"> 
    {$user_name}</a> <span class="msg-time">{$sent}</span></span><br/>{$msg} 
      </div> 
       </div> 
      </td> 
      </tr> 
MSG; 

     } 
     } 

     else { 
     echo '<span style="margin-left: 25px;">No chat messages available! 
</span>'; 
     } 


     ?> 

    </table> 
    </div>

来源

2017-06-09 Kapil Sen

为此，可以使用你的CSS -Class如不做。

<script> 
$(document).ready(function(){ 
     $(".msg-wgt-body").scrollTop($('.msg-wgt-body')[0].scrollHeight); 

    return false; 
}); 
</script>

使用上面的代码并将其添加到PHP文件的底部（您也可以将其添加到您的JS文件中）。尝试这应该工作。

来源

2017-06-10 12:20:06

是的，它的工作。谢谢！！ –

欢迎您:) –

我的客人，您希望向下滚动至底部时，聊天装吧！

只需更换这

</style> 
     <script> $(".1").scrollTop($('.1').height()) 
</script>

与

<script> 
    $("#1").scrollTop($('#1')[0].scrollHeight); 
</script>

来源

2017-06-09 20:22:15

不，我想向下滚动时，我加载我的PHP文件，我也检查了这一点，但也没有工作 –

这就是我的意思，我用上面的代码，甚至当我加载我的聊天时，它滚动内容到最后聊天就像在whatsapp –

其不工作 –

无法修复聊天框底部的滚动条（div）

回答

相关问题