如何将滚动条保持在底部，而不是在聊天刷新时进入中间位置 [英] how to maintain scrollbar at the bottom, instead of going to the middle when chat refreshes
问题描述
我正在进行聊天，在加载时，滚动条会滚动到底部。这是在加载时调用的JS函数：
< script>
函数updateScroll（）{
var element = document.getElementById（chatlogs）;
var elementHeight = element.scrollHeight;
element.scrollTop = elementHeight
}
window.onload = updateScroll;
< / script>
然后，使用以下代码：
<$ p $ {$ b $ .ajaxSetup（{cache：false}）;
setInterval（function（）{$（'＃$） chatlogs'）。load（'logs.php'）;}，1000）;
}）;
..聊天会每秒更新一次。然而，发生的事情是，当它更新时，滚动条会移到中间，而不是留在底部。在最后一段代码使聊天刷新的时候，我该如何让聊天停留在底部？
你可以在这里看到一个工作示例： http://www.friendsinclass.co.nf/
请让我知道，谢谢！
有一些想法，首先您可能想要使用递归来调用AJAX成功的AJAX请求。使用 setInterval（）可能会导致在任何给定时间发生任意数量的AJAX请求，具体取决于它们返回的时间。
其次，为防止用户滚动时滚动条跳到底部，您可能希望给他们一个通知，并在有新内容时跳到底部。
考虑到这些问题，类似这样的内容可能会有效：
JavaScript
var infiniteUpdate = true;
var intervalTimer;
var id = 0;
var log = document.getElementById（chatlogs）;
函数updateScroll（）{
log.scrollTop = log.scrollHeight;
$（'＃messagearea'）。hide（）
}
函数updateLog（）{
//如果设置了间隔计时器，我们清除它
if（typeof intervalTimer =='number'）{
clearInterval（intervalTimer）;
}
id ++;
$ .ajax（{
url：http://jsonplaceholder.typicode.com/photos?id=+ id，
}）
.done（函数（数据）{
// bottomOfScroll是高度.scrollTop必须在用户位于滚动条的底部
var bottomOfScroll = log.scrollHeight --log.clientHeight;
// isScrollable检测元素是否可以滚动
var isScrollable = log.scrollHeight！= log.clientHeight;
//如果如果（log.scrollTop！= bottomOfScroll&& isScrollable）{
// true，这意味着用户滚动了
，用户不在底部并且元素具有滚动条
hasUserScrolled = true;
} else {
// false时，我们仍然在元素的底部
hasUserScrolled = false;
}
//追加新数据
$（'＃chatlogs'）。append（'< p>'+ data [0] .tit如果我们检测到滚动
if（hasUserScrolled）{
//显示消息并允许用户单击以跳到底部
$（'＃messagearea'）。show（）;
} else {
//如果用户没有滚动，将滚动位置移动到底部并隐藏消息
updateScroll（）;
}
//如果我们想要做一些事情来中断递归，我们可以在这里做
if（infiniteUpdate）{
//设置一个新的定时器2.5秒
intervalTimer = setInterval（updateLog，2500）;
}
}）; $（b）
$ b}
$（document）.ready（function（）{
$（'＃messagearea'）。 updateScroll）
updateScroll（）;
updateLog（）;
}）;
HTML
< div id =chatlogs>
< / div>
< div id =messagearea>向下滚动查看新消息
< / div>
CSS
#chatlogs {
height：300px;
width：200px;
overflow：scroll;
}
#messagearea {display：none; }
JS Fiddle示例 https://jsfiddle.net/igor_9000/9tbrgrkn/3/ 与测试AJAX端点
希望有所帮助！
I am making a chat where, on load, the scrollbar scrolls to the bottom. This is the JS function that gets called on load:
<script>
function updateScroll() {
var element = document.getElementById("chatlogs");
var elementHeight = element.scrollHeight;
element.scrollTop = elementHeight
}
window.onload = updateScroll;
</script>
Then, with this code:
$(document).ready(function(e) {
$.ajaxSetup({cache:false});
setInterval(function() {$('#chatlogs').load('logs.php');}, 1000);
});
..the chat gets updated every second. What happens though, is that when it updates, the scrollbar goes to the middle, instead of remaining at the bottom. How can I make my chat stay at the bottom, when the last code makes the chat refresh?
You can see a working example here: http://www.friendsinclass.co.nf/ Please let me know, thank you!
A couple thoughts, first you'll probably want to use recursion to call the AJAX request on AJAX success. Using setInterval() could result in any number of AJAX requests happening at any given time, depending on how long they take to return.
Second, to prevent the scroll bar from jumping to the bottom if the user has scrolled, you'll probably want to give them a notice and the ability to jump to the bottom if there is new content.
Considering those points, something like this would work:
JavaScript
var infiniteUpdate = true;
var intervalTimer;
var id = 0;
var log = document.getElementById("chatlogs");
function updateScroll() {
log.scrollTop = log.scrollHeight;
$('#messagearea').hide()
}
function updateLog() {
//if an interval timer was set, we clear it
if(typeof intervalTimer == 'number') {
clearInterval(intervalTimer);
}
id++;
$.ajax({
url: "http://jsonplaceholder.typicode.com/photos?id=" + id,
})
.done(function( data ) {
//bottomOfScroll is the height .scrollTop must be at for the user to be at the bottom of the scrollbar
var bottomOfScroll = log.scrollHeight - log.clientHeight;
//isScrollable detects if the element can scroll
var isScrollable = log.scrollHeight != log.clientHeight;
//if the user is not at the bottom and the element has a scrollbar
if(log.scrollTop != bottomOfScroll && isScrollable) {
//when true, it means the user has scrolled
hasUserScrolled = true;
} else {
//when false, we are still at the bottom of the element
hasUserScrolled = false;
}
//append the new data
$('#chatlogs').append('<p>'+data[0].title+'</p>')
//if we had detected a scroll
if(hasUserScrolled) {
//show the message and allow the user to click to jump to the bottom
$('#messagearea').show();
} else {
//if the user hasnt scrolled, move the scroll position to the bottom and hide the message
updateScroll();
}
//if we wanted to do something to break recursion, we could do that here
if(infiniteUpdate) {
//set a new timer for 2.5 seconds
intervalTimer = setInterval( updateLog, 2500);
}
});
}
$(document).ready(function() {
$('#messagearea').on('click', updateScroll)
updateScroll();
updateLog();
});
HTML
<div id="chatlogs">
</div>
<div id="messagearea">Scroll Down to View New Messages
</div>
CSS
#chatlogs {
height: 300px;
width: 200px;
overflow: scroll;
}
#messagearea { display: none; }
JS Fiddle example https://jsfiddle.net/igor_9000/9tbrgrkn/3/ with a test AJAX endpoint
Hope that helps!
这篇关于如何将滚动条保持在底部，而不是在聊天刷新时进入中间位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
