JSFiddle - React, Tailwind, and code Playground

by Mohamed Amer

HTML

<div id="message_board">
    <div>New Message Here</div>
    <div>New Message Here</div>
    <div>New Message Here</div>
    <div>New Message Here</div>
    <div>New Message Here</div>
    <div>New Message Here</div>
    <div>New Message Here</div>
</div>

CSS

#message_board{
    height: 200px;
    width: 200px;
    border: 2px solid red;
    overflow: auto;
}
#message_board div{
    padding: 10px;
    border-bottom: #fff;
    background : #eee;
}

JavaScript

$(document).ready(function(){
$('#message_board').scrollTop($('#message_board')[0].scrollHeight);



$('#message_board').on('scroll', function() {
    var scroll = $('#message_board').scrollTop();
    if (scroll == 0) {
        $(this).prepend('<div class="newAppend">Previous 1 Message Here</div><div class="newAppend">Previous 2 Message Here</div><div class="newAppend">Previous 3 Message Here</div>').promise().done(function(){
            $(this).scrollTop($('.newAppend:last').offset().top);
            $('.newAppend').removeClass('newAppend');
        });
    }
});
    
    });