gpt4 book ai didi

javascript - 反向无限滚动

转载 作者:行者123 更新时间:2023-12-01 05:25:06 26 4
gpt4 key购买 nike

我想制作Messenger,消息的显示方式就像在聊天中从下到上滚动一样。当您滚动到限制顶部时,系统将加载更多消息。

加载新项目后scrollTop的控制位置问题。如何统计这个位置?

  • 给出了 meteor 上下文中的示例 - 但纯 js(理论)中的答案将会有所帮助)

HTML

<template name='chatBox'>
<div class='chat-box'><!--viewport-->

{{> chatBoxItem}}
{{/each}}
</div>
</template>

<template name='chatBoxItem'>
<div class='chat-box-wrapper'><!--content block-->
{{#each messeges}}
<p>{{messege}}</p> <!--each messege-->
{{/each}}
</div>
</template>

JS

Template.chatBox.onRendered(function() {
// viewport template

$('.chat-box').scroll(function(e) {
var chatBoxHeight = $('.chat-box').innerHeight();
var wrapperHeight = $('#chat-box-wrapper').innerHeight();
var chatBoxScroll = $('.chat-box').scrollTop();

var currentScrollFromBottom = wrapperHeight - chatBoxScroll; //don't sure if this formula is correct but it's count how many pixels was scrolled from bottom to top

if (currentScrollFromBottom == wrapperHeight && MESSAGES_LIMIT < amountOfMessages) {

//here some code to increase limit of queue

}
});


Template.chatBoxItem.onRendered(function () {
// content template

var $heightOfBlock = $('#chat-box-wrapper').height();
$('.chat-box').scrollTop($heightOfBlock);
// Here I have the most problem,
// I need to scroll to bottom when page is load (work good)
// but after loaded new items, it's need to stand still, but
// it's not. I don't know which formula i need
// to use to count current scroll position

});

也许这个例子根本就是错误的,但我不明白如何使无限滚动反向 - 从下到上。

更新:

我找到了这个公式,但它是用于正常滚动的,我需要如何重建它以用于反向滚动?

$(window).scrollTop() + $(window).height() > $(document).height() - 100

最佳答案

我用 jquery 解决了这个问题:

var st=$("#chat").scrollTop();
$("#chat").prepend(me);
$("#chat").scrollTop(st+me.outerHeight());

https://jsfiddle.net/Lhmn07rg/8/

关于javascript - 反向无限滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40305028/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com