[英]I need to keep a page scrolled to the bottom UNTIL the user scrolls back up
好的,这是我的情况:
我一直在为副项目/爱好创建一个聊天室类型的网站。 当前布局使用html框架。 底部框架是“页脚”或“消息输入”框架。 顶部框是显示公共消息的位置。 我使用ajax每秒更新一次顶部框架。 工作正常。 我的问题是这样的:
我需要能够使顶部框架一直滚动到底部,例如,除非用户向上滚动以查看旧消息。 我目前有一个功能,可以将其向下滚动到底部,但是每次ajax更新页面时,它都会强制将其向下滚动到底部,因此我不能向上滚动超过一秒钟,这确实令人沮丧。 我已经在寻找解决方案,但没有找到对我真正有用的解决方案。 我用来滚动到底部的功能如下:
function jumpToPageBottom() {
$('html, body').scrollTop( $(document).height());
}
它确实可以完成工作,但是如果用户向后滚动以查看较旧的消息,我仍然需要它停止将页面强制移至底部。
更新-
我应该澄清,我使用的是实际框架,而不是iframe。 我的“索引”页面代码是:
<FRAMESET ROWS="*,90">
<FRAME SRC="header.php" name="display" MARGINWIDTH="0" MARGINHEIGHT="0" FRAMEBORDER="NO">
<FRAME SRC="footer.php" name="message" SCROLLING="no" BORDERCOLOR="00FF00" MARGINWIDTH="0" MARGINHEIGHT="0">
</FRAMESET>
刷新我的聊天消息的代码是:
<script id="source" language="javascript" type="text/javascript">
function jumpToPageBottom() {
$('html, body').scrollTop( $(document).height());
}
$(function() {
startRefresh();
});
function startRefresh() {
setTimeout(startRefresh,1000);
$.ajax({
url: 'api.php', //the script to call to get data
data: "", //you can insert url argumnets here to pass to api.php
//for example "id=5&parent=6"
dataType: 'json', //data format
success: function(data) //on recieve of reply
{
//--------------------------------------------------------------------
// 3) Update html content
//--------------------------------------------------------------------
$('#output').html(data); //Set output element html
jumpToPageBottom();
}
});
};
</script>
这样的刷新只是一个不好的方法吗? div的更新方式是否会引起我的某些问题? 我是所有这些的新手(很显然),因此任何建议都将不胜感激。
您需要的基本逻辑是:
var wasAtBottom = isAtBottom();
$('#output').html(data);
if (wasAtBottom) {
jumpToPageBottom();
}
与isAtBottom
来自这个答案 :
function isAtBottom() {
return $(window).scrollTop() + $(window).height() === $(document).height();
}
这是为您工作的演示: http : //jsfiddle.net/9q17euuo/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.