[英]Reverse infinity scroll
我想制作信使,信息在聊天中顯示,從下到上滾動。 當您滾動到限制的頂部時,系統將加載更多消息。
加載新項目后scrollTop
控件位置的問題。 怎么算這個位置?
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());
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.