如何在div底部修复滚动条？
我正在做一个简单的聊天应用程序,我想在底部修复一个div的滚动条.就像这样
加载索引页面时,滚动条必须位于底部
这是我的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>
我怎么设置这个,请帮帮我..谢谢
Fre*_*edy 26
试试这个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/
- 谢谢弗雷迪!我看到很多例子,都说同样的事情:scrollTop = scrollHeight.这里有两个键:首先是.animate.这是实际让它移动的关键.其次,你使用$(document).height而不是(".messages")的高度.这实际上意味着您需要使用您的对象(div,textarea等)获取数据线的数量,以及通过字体大小(即对象中窗口的高度)的倍数.所以从某种意义上说,$ document仍然是错误的,但它足以让我弄清楚为什么每个人都错了. (3认同)
你想要这样的东西,其中box是包含你聊天的div.在页面加载时调用这些.
var box = document.getElementById('Box');
box.scrollTop = box.scrollHeight;
发布新聊天时也会调用此方法.
我使用谷歌应用引擎创建了一个类似的应用程序.你可以在这看看它
http://chatter-now.appspot.com/
随意使用它作为参考.虽然您使用的是php,但视觉方面可能会有所帮助.