无法向上滚动div内容 [英] cant scroll up the div contents
问题描述
我创建了一个简单的聊天应用程序.我使用setTimeout每0.5毫秒刷新一次消息，并使用top滚动条将滚动条保持在底部.但是问题是无法向上滚动消息div.
I have created a simple chat app . I have used setTimeout to refresh the messages every .5 ms and scrolltop to keep the scroll bar at the bottom. But the problem is that cant scroll up the message div.
<?php
session_start();
?>
<html>
<head>
<title>Live Table Data Edit</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<br />
<br />
<br />
<div class="table-responsive">
<h3 align="center">You Are : <?php echo $_SESSION['name']; ?></h3><br />
<div id="live_data"></div>
</div>
<div id="messages" style=" border: 1px solid #ccc;
width: 350px;
height: 210px;
padding: 10px;
overflow-y:scroll;
display:none;"></div>
<div class="area" style="display:none">
<textarea id="text" name="text"style=" border: 1px solid #ccc;
width: 350px;
height: 50px;
padding: 10px;" ></textarea>
<input type="submit" id="sub" name="sub" value="Send" />
</div>
</div>
<script>
var currentID = null;
var chatTimer = null;
function fetch_data() {
$.ajax({
url: "select.php",
method: "POST",
success: function(data) {
$('#live_data').html(data);
//fetch_chat();
}
});
}
function fetch_chat() {
$.ajax({
url: "fetch_chat.php",
method: "POST",
data: {
id: currentID
},
dataType: "text",
success: function(data) {
$("#messages").show();
$('#messages').html(data);
$("div.area").show();
$("#messages").animate({ scrollTop: $(document).height() }, "fast");
return false;
chatTimer = setTimeout(fetch_chat, 500); //request the chat again in 2 seconds time
}
});
}
$(document).ready(function() {
$(document).on('click', '.first_name', function() {
currentID = $(this).data("id1");
//immediately fetch chat for the new ID, and clear any waiting fetch
timer that might be pending
clearTimeout(chatTimer);
fetch_chat();
});
$("#sub").click(function() {
var text = $("#text").val();
$.post('insert_chat.php', {
id: currentID,
msg: text
}, function(data) {
$("#messages").append(data);
$("#text").val('');
});
});
fetch_data();//this will also trigger the first fetch_chat once it completes
});
</script>
</body>
</html>
当我将setTimeout放到scrolltop下方时，return false语句停止执行，但随后便可以向上滚动.
when I put the setTimeout below scrolltop the return false statement stops its execution but then I am able to scroll up.
推荐答案
每次有新消息时，您是否真的需要滚动到消息div的底部?大多数消息传递应用程序都不那样做.它们只是在查看消息开始时滚动到底部，因为您想查看最新消息.
Do you really need to scroll to the bottom of the message div every time there's a new message? Most messaging apps don't do that; they only scroll to the bottom at the beginning of viewing the messages since you want to see the newest ones.
运行代码段.请注意，自动滚动到底部仅执行一次，如果有新消息，我的滚动位置保持不变(因为我仍在阅读)，但是添加了新消息.
Run Code Snippet. Notice that the auto scroll to the bottom is only executed once, if there are new messages, my scroll position stays the same (since I am still reading) but new messages are added.
$(document).ready(function(){
var i = 1;
setInterval(fillUpChat,2000);
var div_to_scroll = $("#messages-container")[0];
div_to_scroll.scrollTop = div_to_scroll.scrollHeight;
function fillUpChat(){
$("#messages").append("<li>New Message "+i+"</li>");
i++;
}
});
#messages-wrapper{
height:200px;
border:1px solid black;
padding:10px;
}
#messages-container{
height:100px;
overflow-y:auto;
border:1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="messages-wrapper">
<div id="messages-container">
<ul id="messages">
<li>Old Message</li>
<li>Old Message</li>
<li>Old Message</li>
<li>Old Message</li>
<li>Old Message</li>
<li>Old Message</li>
<li>Old Message</li>
<li>Old Message</li>
<li>Old Message</li>
</ul>
</div>
</div>
这篇关于无法向上滚动div内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
