Ajax自动刷新 - 不影响滚动

时间:2014-02-16 12:57:00

标签: ajax

我使用ajax在index.php文件中使用此代码自动刷新div标记:

<script type="text/javascript">
$(document).ready(function() {
$.ajaxSetup({ cache: false });
setInterval(function() {
$('#messanges').load('messanges.php');
}, 1000); 
});
</script>

<div id="messanges"></div>
<textarea name="chat_input" id="chat_input"></textarea>

在messanges.php中,我有一个自动向下滚动代码。
因为我希望它在进入聊天时从底部开始。

<head>
<script>
var chat_height = $('#chat').outerHeight();
$('#chat_box').scrollTop(chat_height);
</script>
</head>

<div id="chat_box" style="height:700px; overflow:auto">
<div id="chat">
<div id="Name">Test user:</div>
<div id="img"><img src="picture.png" /></img></div>
<p class="triangle-isosceles left">
"Test" </p> 
</div>

由于ajax自动刷新,代码现在强制滚动停留在底部 如何让它自动刷新,但是如果我想向上滚动它不会在刷新时强行让我失望?

1 个答案:

答案 0 :(得分:0)

尝试这样的

<head>
<script>
    var chat_height = $('#chat').outerHeight();
    if($('.doScroll').is(':checked'))
    {
        $('#chat_box').scrollTop(chat_height);
    }
</script>
</head>

<input type="checkbox" class="doScroll" checked />
<div id="chat_box" style="height:700px; overflow:auto">
<div id="chat">
    <div id="Name">Test user:</div>
    <div id="img"><img src="picture.png" /></img></div>
    <p class="triangle-isosceles left">"Test" </p> 
</div>