jQuery 如何修复滚动条总是在 div 的底部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15629599/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to fix the scrollbar always at the bottom of a div?
提问by User
I am doing a simple chat application,I want to fix the scrollbar of a div always at the bottom.just like this
我正在做一个简单的聊天应用程序，我想修复始终在底部的 div 滚动条。就像这样
When loading the index page the scrollbar must be at the bottom
加载索引页时滚动条必须在底部
Here is my style.css
这是我的 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;
}
Here is my index.php
这是我的 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>
How can i set this,please help me.. Thanks
我该如何设置，请帮助我..谢谢
回答by Fredy
Try this jquery :
试试这个 jquery ：
$(".messages").animate({ scrollTop: $(document).height() }, "slow");
return false;
and here is the fiddle : http://jsfiddle.net/EX6vs/
这是小提琴：http: //jsfiddle.net/EX6vs/
or refers to the height of the element (many agree is the right way), as below:
or 指的是元素的高度（很多人都同意是正确的方式），如下：
$(".messages").animate({ scrollTop: $(this).height() }, "slow");
return false;
and here is the fiddle : http://jsfiddle.net/69vpnyu1/
这是小提琴：http: //jsfiddle.net/69vpnyu1/
回答by btevfik
you want something like this, where box is the div that contains your chat. call these on page load.
您想要这样的东西，其中 box 是包含您的聊天内容的 div。在页面加载时调用这些。
var box = document.getElementById('Box');
box.scrollTop = box.scrollHeight;
also call this when you post a new chat.
当您发布新聊天时也调用此方法。
i had created a similar application using google app engine. you can have look at it here
我使用谷歌应用引擎创建了一个类似的应用程序。你可以在这里看看
http://chatter-now.appspot.com/
http://chatter-now.appspot.com/
feel free to use it as reference. although you are using php, the visual aspects might be helpful.
随意使用它作为参考。尽管您使用的是 php，但视觉方面可能会有所帮助。
回答by Prateek Kaushik
function loadchatval(){
$.post('loadchat.php',function(data){
$('#load_chat').html(data);
$("#load_chat").animate({ scrollTop: $(document).height() }, "slow");
return false;
});
}
回答by Dead Man
You can do it using jQueryas you can see the demo here:
您可以使用jQuery这里的演示来完成它：
回答by Shoeb
Below line of code to scroll vertical scrollbar always in bottom of the whole page.
下面的代码行始终在整个页面的底部滚动垂直滚动条。
$("html, body").animate({ scrollTop: $(document).height() }, "fast");
Below line of code to scroll vertical scrollbar always in bottom of scrollable div container named to "daViewerContainer".
下面的代码行始终在名为“ daViewerContainer”的可滚动 div 容器底部滚动垂直滚动条。
$("#daViewerContainer").animate({ scrollTop: $(document).height() }, "fast");
回答by KJS
I fixed this with:
我用以下方法解决了这个问题：
$(document).scrollTop($(document).height());
All depends how you configure your div's, then use the div for document. But this one works exellent with sticky footers as well.
一切都取决于您如何配置 div，然后将 div 用于文档。但这一个也适用于粘性页脚。
