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>

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

2 个答案: