![](/img/trans.png)
[英]JQuery - Scroll and anchor to bottom of ajax-driven div unless user scrolls up
[英]JQuery - Scroll and anchor to bottom of ajax-driven div unless user scrolls up with demo code
我试图滚动到div#chat-feed的底部,并将溢出设置为auto并停留在那里,除非用户向上滚动该div的内容。 如果它们向下滚动,则div应该锁定在底部,新内容将显示在底部。
注意:这将是只读的。 最终版本上将没有“添加测试消息”或任何按钮或文本输入。 这将使观众能够实时观看聊天提要。
这是我到目前为止所拥有的。
<!DOCTYPE html><html class='doesntSupportFlex'>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
#chat-feed {
height: 203px;
width: 300px;
overflow: auto;
border: 1px solid black;
}
p.chat-feed {
border-bottom: 1px dotted black;
padding: 5px;
margin: 0;
}
</style>
</head>
<body>
<div id="chat-feed"></div>
<br>
<div class="form-group">
<input type="button" name="chat-button" id="chat-button" value="add test message" class="btn btn-info" />
</div>
<script>
$(document).ready(function(){
$('#chat-button').click(function(){
$.ajax({
url:"insert.php",
});
});
// Initial load (without this there will be a delay of loaded content)
$('#chat-feed').load("chat-feed.php");
var out = document.getElementById("chat-feed"); // outer container of messages
// generate some chatter every second
setInterval(function() {
//check current scroll position BEFORE message is appended to the container
var isScrolledToBottom = checkIfScrolledBottom();
$('#chat-feed').load("chat-feed.php");
// scroll to bottom if scroll position had been at bottom prior
scrollToBottom(isScrolledToBottom);
}, 1000);
function checkIfScrolledBottom() {
// allow for 1px inaccuracy by adding 1
return out.scrollHeight - out.clientHeight <= out.scrollTop + 1;
}
function scrollToBottom(scrollDown) {
if (scrollDown)
out.scrollTop = out.scrollHeight - out.clientHeight;
}
setTimeout(function() { $("#chat-feed").scrollTop($("#chat-feed")[0].scrollHeight);}, 1200);
});
</script>
</body></html>
您可以删除$('#chat_button)
代码,没问题,但其余部分保持原样。
此处的关键是检测是否滚动到底部,然后加载更多内容,然后重新定位滚动条(如果以前位于底部)。
$(document).ready(function(){
var out, isScrolledToBottom;
out = document.getElementById("chat-feed"); // outer container of messages
$('#chat_button').click(function(){
isScrolledToBottom = checkIfScrolledBottom();
$.ajax({
url:"insert.php"
}).done(function() {
scrollToBottom(isScrolledToBottom);
});
});
// initial load of chat
$('#chat-feed').load("chat-feed.php", function() {
out = document.getElementById("chat-feed"); // re-reference after a jQuery .load() as it removes the original dom element and add a new one
scrollToBottom(true);
});
// check for chatter every second
setInterval(function() {
isScrolledToBottom = checkIfScrolledBottom();
$('#chat-feed').load("chat-feed.php", function() {
out = document.getElementById("chat-feed"); // re-reference after a jQuery .load() as it removes the original dom element and add a new one
scrollToBottom(isScrolledToBottom);
});
}, 1000);
function checkIfScrolledBottom() {
// allow for 1px inaccuracy by adding 1
return out.scrollHeight - out.clientHeight <= out.scrollTop + 1;
}
function scrollToBottom(scrollDown) {
if (scrollDown)
out.scrollTop = out.scrollHeight - out.clientHeight;
}
//setTimeout(function() { $("#chat-feed").scrollTop($("#chat-feed")[0].scrollHeight);}, 1200);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.