如何在向上滚动时实现无限滚动（例如，加载先前的消息）？

Question

我正在学习创建一个简单的网络聊天，我希望实现无限滚动以加载早期的消息。我试图实现无限滚动但它只在滚动到底部时才起作用，而不是在向上滚动以查看旧消息时。

至于消息，它现在是硬编码的，我也尝试获取用户输入而不是硬编码。此外，如果用户正在阅读旧消息，则它将自动滚动到底部以显示新消息。

我可以在底部调整用于无限滚动的代码，以应用于向上无限滚动吗？或者，还有其他方法吗？

无限滚动到底部：

<script type="text/javascript">
$(".chatlogs").scroll(function(){
    if($(this).scrollTop() + $(this).innerHeight() >= $(this) 
        [0].scrollHeight){
        //appended div items.   
    }
})
</script>

要在页面加载时查看最新消息而不是旧消息：

 <script>
 window.onload=function () {
     var objDiv = document.getElementById("logbox");
     objDiv.scrollTop = objDiv.scrollHeight;
 }
 </script>

接收新消息时自动滚动到底部：

$(".chatlogs").stop().animate({ scrollTop: $(".chatlogs")[0].scrollHeight}, 1000);

CSS：

.chatlogs {
    padding: 10px;
    width: 100%;
    max-height: 450px;
    overflow-x:hidden;
    overflow-y:scroll;
    background :#efe7dd
}

.chatlogs::-webkit-scrollbar {
    width:10px;
}

.chatlogs::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #b3ada7;
}