Question

我正在做一个简单的聊天应用程序，我想在底部修复div的滚动条。就像这样 enter image description here

加载索引页面时，滚动条必须位于底部

这是我的style.css

body{
font: 0.9em monospace;
}
   .messages{
    border: 1px solid #ccc;
    width: 250px;
    height: 210px;
    padding: 10px;
    overflow-y:scroll;

}
.message{
    color: slategrey;

}
 .message p{
    margin: 5px 0;
}
.entry{
   width: 260px;
   height: 40px;
   padding: 5px;
   margin-top: 5px;
   font: 1em fantasy;

}

这是我的index.php

<?php
session_start();
$_SESSION['user'] = (isset($_GET['user']) === TRUE) ? (int) $_GET['user'] : 0;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
      <link rel="stylesheet" href="css/styles.css"></link>
  </head>
   <body>
      <div class="chat">
           <div class="messages" id="messages">
           </div>
        <textarea class="entry" placeholder="type here and press enter"></textarea>
    </div>
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="js/chat.js"> </script>
</body>

我怎么设置这个，请帮帮我.. 感谢

Answer 1

试试这个jquery：

$(".messages").animate({ scrollTop: $(document).height() }, "slow");
  return false;

这里是小提琴：http://jsfiddle.net/EX6vs/

或指的是元素的高度（许多人认为是正确的方法），如下所示：

$(".messages").animate({ scrollTop: $(this).height() }, "slow");
  return false;

这里是小提琴：http://jsfiddle.net/69vpnyu1/

Answer 2

你想要这样的东西，其中box是包含你聊天的div。在页面加载时调用这些。

var box = document.getElementById('Box');
box.scrollTop = box.scrollHeight;

在您发布新聊天时也会调用此方法。

我使用谷歌应用引擎创建了一个类似的应用程序。你可以在这看看它

http://chatter-now.appspot.com/

随意使用它作为参考。虽然您使用的是php，但视觉方面可能会有所帮助。

Answer 3

您可以使用jQuery进行操作，因为您可以在此处看到演示：

http://jsfiddle.net/9S92E/

Answer 4

function loadchatval(){
    $.post('loadchat.php',function(data){               
    $('#load_chat').html(data); 
    $("#load_chat").animate({ scrollTop: $(document).height() }, "slow");
    return false;
});
}

Answer 5

在整页底部滚动垂直滚动条的代码行下方。

$("html, body").animate({ scrollTop: $(document).height() }, "fast");

下面的代码行，用于滚动垂直滚动条，始终位于名为“ daViewerContainer ”的可滚动div容器的底部。

$("#daViewerContainer").animate({ scrollTop: $(document).height() }, "fast");

Answer 6

我用以下方法解决了这个问题：

$(document).scrollTop($(document).height());

所有取决于你如何配置div，然后使用div作为文档。但是这个也很好用粘性页脚。

如何在div底部修复滚动条？

6 个答案: