反向无限滚动答案

【问题标题】：Reverse infinity scroll反向无限滚动
【发布时间】：2016-10-28 12:22:48
【问题描述】：

我想制作信使，其中消息显示就像在从下到上滚动的聊天中一样。当你滚动到上限时，系统会加载更多消息。

加载新项目后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>

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

【问题讨论】：

标签： javascript jquery meteor infinite-scroll

【解决方案1】：

我用 jquery 解决了这个问题：

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

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

【讨论】：