javascript - 如何使 div 内的 ul 标签可滚动

Question

我是设计新手所以我正在制作一个聊天框但是当在框中填充值后它 div 上升，如何使该 div 向下滚动我尝试了来自互联网的所有解决方案但没有一个有效，所以我有两个问题 div 滚动应该在底部并且 div 刷新 2 秒这是代码

<div class="col-sm-3 col-sm-offset-4 frame" style='margin-top:-8px;' id='huge'>
<ul id="mylist" stye="">

<?php 
  $conn = new PDO("mysql:host=localhost;dbname=chatbox",'root');
  $stmt = $conn->prepare("select * from chatbox order by created");
  $stmt->execute();
  if($stmt->rowCount() > 0)
  {
    while($row = $stmt->fetch(PDO::FETCH_ASSOC))
    {
        if($_SESSION['username']==$row['user_name']){
?>
<li style="width:100%" id="bottom">
  <div class="msj macro">
    <div class="avatar"><img class="img-circle" style="width:100%;" src="img/unknown.png" /></div>
    <div class="text text-l" id="">
      <p>
        <?php echo $row['msg']; ?>
      </p>
      <p><small><?php echo date('H:i', strtotime($row['created']));?></small></p>
    </div>
  </div>
</li>
<?php }else{ ?>
<li style="width:100%; color:white;" id="myid">

  <div class="msj-rta macro">
    <div class="text text-r">
      <p>
        <?php echo $row['msg']; ?>
      </p>
      <p><small><?php echo date('H:i', strtotime($row['created']));?></small></p>
    </div>
    <div class="avatar" style="padding:0px 0px 0px 10px !important">
      <img class="img-circle" style="width:100%;" src="img/unknown.png" /></div>
</li>
<?php 
    }}}
?>
</ul>
<div>
<form role='insert'>
  <input type='hidden' class="mytext" name='user_name' id='user_name' value="<?php echo $_SESSION['username'] ?>" />
  <div class="msj-rta macro" style='margin-right:30px;margin-bottom:-40px;'>
    <div class="text text-r" style="background:whitesmoke !important;">
      <input class="mytext" placeholder="Type a message" name='msg' id='msg' />
    </div>
  </div>
  <div style="padding-left:240px;margin-bottom:20px;">
    <button type="submit" class="login-button" id='submit'><i class="fa fa-chevron-right"></i></button>
  </div>
</form>
</div>
</div>
</body>
 <script>
 $(document).ready(function() {
  $("#submit").click(function() {
    var user_name = $("#user_name").val();
    var msg = $("#msg").val();
    if (msg == '' || msg == '') {
      alert("Please Fill All Fields");
    } else {
      $.ajax({
        type: "POST",
        url: "user/chatInsert.php",
        data: 'user_name=' + user_name + '&msg=' + msg,
        cache: false,
        success: function(result) {
          window.location.reload();
        }
      });
    }
    return false;
  });
});

我尝试了所有可能的代码来影响我的代码，但没有一个有效，所以请尝试帮助我。

Answer 1

我不确定您在问什么，但根据您的标题，这就是使 block 可滚动的方式。

.scrollable {
  overflow: auto;
  height: 100px;
}

<div class="scrollable">
  <ul>
    <li>this is a list</li>
    <li>this is a list</li>
    <li>this is a list</li>
    <li>this is a list</li>
    <li>this is a list</li>
    <li>this is a list</li>
    <li>this is a list</li>
    <li>this is a list</li>
    <li>this is a list</li>
    <li>this is a list</li>
    <li>this is a list</li>
    <li>this is a list</li>
    <li>this is a list</li>
    <li>this is a list</li>
    <li>this is a list</li>
  </ul>
</div>