JSFiddle - React, Tailwind, and code Playground

by frapporti

HTML

<button>Add Comment</button>

<div class="container">
    <article>Sixth Comment</article>
    <article>Fifth Comment</article>
    <article>Fourth Comment</article>
    <article>Third Comment</article>
    <article>Second Comment</article>
    <article>First Comment</article>
</div>

CSS

.container {
    display: -webkit-flex;
    -webkit-flex-direction: column-reverse;
    position: fixed;
    bottom: 0;
    right: 0;
    width: 200px;
    height: 200px;
    overflow: scroll;
    background: #ccc;
    text-align: center;
}

.container article {
    min-height: 80px;
    background: #fff;
    border: 5px solid #aaa;
    position: relative;
}  

.container article:last-child:before {
    content: "Load more";
    display: block;
    position: absolute;
    width: 100%;
    padding: 30px 0;
    top: -80px;
}

JavaScript

/* js is only to fake ajax */

var n = 0;
var o = 0;

$("button").on("click", function() {
  $("article").first().before("<article style='display:block'>New Comment " + n++ + "</article>");
});

$(".container").on("scroll", function() { 
  if (this.scrollTop < 10 ) { 
    $("article").last().after("<article style='display:block'>Old Comment " + o++ + "</article>");
 }  
});