1
私はそれは些細な問題だと思ったが、私はこれについての情報を見つけることができないことをさまよっ:リバース無限スクロール[更新]
私はメッセンジャーを作りたい、メッセージがチャットどこスクロールのように表示されている場合下から上へそして上限までスクロールすると、システムはより多くのメッセージを読み込みます。
scrollTop
の制御位置の問題は、新しいアイテムをロードした後に発生します。このポジションを数える方法は?
- 流星の文脈で例を与えられた - しかし、純粋な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
});
たぶん、この例はまったく間違っていますが、私は無限大のスクロールを下から上に向ける方法を見いだします。あなたはこの
UPDためのいくつかのjQueryプラグインをお勧めしている場合
は、あまりにも参考になります:
私は、この式を見つけたが、それは私が逆のスクロールのためにこれを再構築する必要があるか、通常のスクロールには?
$(window).scrollTop() + $(window).height() > $(document).height() - 100