無法修復聊天框底部的滾動條（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）

回答

相關問題