如何解决滚动条总是停留在 div 底部的问题？

Question

如何解决滚动条总是停留在 div 底部的问题？

jquerycss

17

我正在制作一个简单的聊天应用程序，我想让一个

标签的滚动条始终保持在底部。就像这样 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>

请问如何设置这个，帮帮我吧.. 谢谢

- User

1

这可能会给你一些启示：http://jsfiddle.net/97z6Q/ - Ohgodwhy

6个回答

8

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

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

当您发布新聊天时，也要调用此功能。

我曾使用Google App Engine创建过类似的应用程序。您可以在这里查看：

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

请随意参考。虽然您正在使用PHP，但视觉方面可能会有所帮助。

- btevfik

它有点像聊天室/留言板混合体。无论你在那里写什么都会保留下来。 - btevfik

2

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

- Prateek Kaushik

2

你可以使用jQuery完成它，你可以在这里看到演示： http://jsfiddle.net/9S92E/

- Dead Man

0

我用以下代码修改了这个问题：

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

一切都取决于您如何配置您的div，然后使用该div进行文档处理。但是这个方法也非常适用于粘性页脚。

- KJS

0

以下代码行可使垂直滚动条始终保持在整个页面的底部。

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

以下代码行可使垂直滚动条始终停留在名为 "daViewerContainer" 的可滚动 div 容器的底部。

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

- Shoeb

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Fredy · Accepted Answer

尝试使用这个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/