JQuery - 滚动并锚定到ajax驱动的div的底部，除非用户使用演示代码向上滚动 [英] JQuery - Scroll and anchor to bottom of ajax-driven div unless user scrolls up with demo code
问题描述
我试图滚动到div＃chat-feed的底部，溢出设置为auto并保持在那里，除非用户滚动该div的内容。如果它们向下滚动，则div应锁定到底部，新内容将显示在底部。
I am trying to scroll to the bottom of a div #chat-feed with overflow set to auto and stay there unless a user scrolls that div's content up. If they scroll back down, the div should lock to the bottom and new content will be displayed at the bottom.
注意：这将是只读。最终版本上没有添加测试消息或任何按钮或文本输入。这将使观众能够现场观看聊天节目。
Note: This will be read only. There will be no "add test message" or any button or text input on the final version. This will allow spectators the ability to watch the chat feed live.
这是我目前所拥有的。
<!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）代码，没问题，但保持其余部分原样。
You can remove the $('#chat_button) code, no problem, but keep the rest of it as is.
这里的关键是检测是否滚动到底部，然后加载更多内容，然后重新定位滚动，如果之前在底部。
The key here is to detect whether scrolled bottom, then load more content, then reposition the scroll if previously at the bottom.
$(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);
});
这篇关于JQuery - 滚动并锚定到ajax驱动的div的底部，除非用户使用演示代码向上滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
