无法修复聊天框(div)底部的滚动条

Question

我正在开发聊天应用程序。在加载我的 PHP 文件时，我想修复div 底部的滚动条。我已经编写了脚本来执行此操作。我正在使用 CSS ID 访问它，但我无法使其工作。

法典

//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>

Answer 1

你也可以使用 CSS -Class 来做到这一点。

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

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

Answer 2

我想在

聊天加载时向下滚动到底部，对吧！

只需替换此

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

跟

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