Question

我尝试使用AJAX和PHP进行实时聊天。我将聊天框设置为300px高，但是当我尝试聊天时，数据超出了该元素。当聊天超过那个高度时，我希望它有一个滚动条，以便我可以阅读上面的聊天。我怎么能这样做？

的index.php

<?php
include 'db.php';
?>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Chat System</title>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript">
    function ajax(){
      var req = new XMLHttpRequest();
      req.onreadystatechange = function (){

        if(req.readyState == 4 && req.status ==200){
              document.getElementById('chat').innerHTML = req.responseText;

        }
      }
      req.open('GET','chat.php',true);
      req.send();
    }
    setInterval(function(){ajax()},1000);
  </script>
</head>
<body onload="ajax();">
  <div class="" id="container">
    <div id="chat_box">
      <div id="chat"></div>
    </div>
    <form class="" action="index.php" method="post">
      <input type="text" name="name" value="" placeholder="Name">
      <textarea name="msg"  placeholder="Enter Message"></textarea>
      <input type="submit" name="submit" value="Send It!">
    </form>
    <?php

    if(isset($_POST['submit']))
    {
      $name = $_POST['name'];
      $msg = $_POST['msg'];
      $query ="INSERT INTO chathere (name,msg) values ('$name','$msg')";
      $run= $lol->query($query);

      if($run)
      {

        // echo "<embed loop='false' src='chat.mp3' hidden='true' autoplay='true'/>";


      }
    }

    ?>
  </div>
</body>

Chat.php

<?php
include 'db.php';
$query = "SELECT * FROM chathere ORDER BY id DESC";
$run = $lol->query($query);
while($row = $run->fetch_array()) :
  ?>
  <div id="chat_data">
    <span style="color:green;"><?php echo $row['name']; ?></span>:
    <span style="color:brown;"> <?php echo $row['msg'];  ?></span>
    <span style="float:right;"><?php echo formatDate($row['date']) ?></span>
  </div>
<?php endwhile; ?>

的CSS：

#container{
  width: 40%;
  background: white;
  margin: 0 auto;
  padding: 20px;
}
#chat_box{
  width: 90%;
  height: 400px;
  overflow-y:scroll;
}
#chat_data {
  width: 100%;
  padding: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid silver;
  font-weight: bold;
  overflow-y: scroll;
}

以下是它的外观：

Answer 1

只需为该overflow-y:scroll;元素使用css <div>代码，<div>元素将更改为可滚动元素。

此外，无限滚动对于聊天框也很不错认为它可能有所帮助......

<?php
include 'db.php';
$query = "SELECT * FROM chathere ORDER BY id DESC";
$run = $lol->query($query);

while($row = $run->fetch_array()) : ?>

  <div id="chat_data" style="overflow-y:scroll;">
    <span style="color:green;"><?php echo $row['name']; ?></span>:
    <span style="color:brown;"> <?php echo $row['msg']; ?></span>
    <span style="float:right;"><?php echo formatDate($row['date']) ?></span> 
  </div>

<?php endwhile; ?>

Answer 2

我建议将chat_data从ID更改为类。文档的ID must be unique，而类可以重复。

然后，在#chat_box上设置overflow-y:scroll允许该元素在内容垂直溢出时滚动。

工作示例：

#chat_box {
  width: 90%;
  height: 150px;
  overflow-y: scroll;
  border:1px solid silver;
}

.chat_data {
  padding: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid silver;
  font-weight: bold;
}

<div id="chat_box">

  <div class="chat_data">
    <span style="color:green;">Name</span>:
    <span style="color:brown;">Message</span>
    <span style="float:right;">Date</span>
  </div>
  <div class="chat_data">
    <span style="color:green;">Name</span>:
    <span style="color:brown;">Message</span>
    <span style="float:right;">Date</span>
  </div>
  <div class="chat_data">
    <span style="color:green;">Name</span>:
    <span style="color:brown;">Message</span>
    <span style="float:right;">Date</span>
  </div>
  <div class="chat_data">
    <span style="color:green;">Name</span>:
    <span style="color:brown;">Message</span>
    <span style="float:right;">Date</span>
  </div>
  <div class="chat_data">
    <span style="color:green;">Name</span>:
    <span style="color:brown;">Message</span>
    <span style="float:right;">Date</span>
  </div>
  <div class="chat_data">
    <span style="color:green;">Name</span>:
    <span style="color:brown;">Message</span>
    <span style="float:right;">Date</span>
  </div>
  <div class="chat_data">
    <span style="color:green;">Name</span>:
    <span style="color:brown;">Message</span>
    <span style="float:right;">Date</span>
  </div>
  <div class="chat_data">
    <span style="color:green;">Name</span>:
    <span style="color:brown;">Message</span>
    <span style="float:right;">Date</span>
  </div>
  <div class="chat_data">
    <span style="color:green;">Name</span>:
    <span style="color:brown;">Message</span>
    <span style="float:right;">Date</span>
  </div>
  <div class="chat_data">
    <span style="color:green;">Name</span>:
    <span style="color:brown;">Message</span>
    <span style="float:right;">Date</span>
  </div>
  <div class="chat_data">
    <span style="color:green;">Name</span>:
    <span style="color:brown;">Message</span>
    <span style="float:right;">Date</span>
  </div>
  <div class="chat_data">
    <span style="color:green;">Name</span>:
    <span style="color:brown;">Message</span>
    <span style="float:right;">Date</span>
  </div>
  <div class="chat_data">
    <span style="color:green;">Name</span>:
    <span style="color:brown;">Message</span>
    <span style="float:right;">Date</span>
  </div>
  <div class="chat_data">
    <span style="color:green;">Name</span>:
    <span style="color:brown;">Message</span>
    <span style="float:right;">Date</span>
  </div>
  <div class="chat_data">
    <span style="color:green;">Name</span>:
    <span style="color:brown;">Message</span>
    <span style="float:right;">Date</span>
  </div>

</div>

容器

2 个答案: