Question

我想在facebook上创建一个滚动框，这样你的框总是滚动到底部。（非常简单，我只是学习使用PHP）

在CSS中我有这个：

#chat{
    height: 200px;
    overflow-y: scroll;
}

我的PHP文件看起来像这样

  $db = mysqli_connect('localhost', 'root', '', 'registration');

  if ($db === false){
    die("The database couldn't be found!");
  };

  $sql = "SELECT * FROM chat";
  if ($result = mysqli_query($db, $sql)){
    if(mysqli_num_rows($result) > 0){
     echo "<table>";
         echo "<tr>";
             echo "<th class='mytable'>username</th>";
             echo "<th class='mytable'>Message</th>";
         echo "</tr>";
         while($row = mysqli_fetch_array($result)){
           echo "<tr>";
              echo "<td>" . $row['user'] . "</td>";
              echo "<td>" . $row['message'] . "</td>";
            echo "</tr>";
        }
      echo "</table>";
      mysqli_free_result($result);
    }
  }

我的HTML文件：

<form method="post" action="home.php" class="signinup col-md-6 col-md-offset-3">
            <h2>Chat</h2>
            <div class="row chat">
                <?php include('../chat/viewchat.php');  ?>
            </div>
            <div class="row">
                <input type="text" name="message" placeholder="Send a message...">
                <button type="submit" name="send_message">Send</button>
            </div>
            <div class="row">
                <p>Do you want to <a href="home.php?logout='1'">log out?</a> &#x1f622;</p>
            </div>
        </form>

Answer 1

试试这个JS你需要在每个表单提交上调用这个函数

JS

var msgDiv = document.getElementById('messages-container');/*div which contain messages mention its id*/
    msgDiv.scrollTop = msgDiv.scrollHeight;

希望这会有所帮助...

聊天框：始终滚动到底部

1 个答案: