JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<div id="status"></div>
<div id="message_container">
<p>a</p>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
</div>

CSS

#message_container{width:200px; height:600px; overflow-y:hidden;}

JavaScript

$(document).ready(function(){			
	$("#message_container").scrollTop($("#message_container")[0].scrollHeight);
	
	var Height = 600;

    $('#message_container').scroll(function(){
        if ($('#message_container').scrollTop() == 0){
            $('#status').html('up');
        	//alert('up');

        }else{
            $('#status').html('down');
			//alert('down');
        }
    });
	
});