JSFiddle - React, Tailwind, and code Playground

by wrxsti85

CSS

.messages {
	height: 200px;
	overflow-y: scroll;
	margin: 20px;
	width: 300px;
	border: solid 1px;
}

JavaScript

(function($){
    $.fn.isScrolledToBottom = function(){
        var el = this;
        var $el = $(el);
        return (($el[0].scrollHeight - $el.scrollTop()) - $el.outerHeight()) < 1;
    };
})(jQuery);

var $messages = $('<div>').addClass('messages');
$('body').append($messages);

setInterval(function(){
	var $message = $('<p>').addClass('message').text('testing...');
	$messages.append($message);
}, 600);

$(document).on('click', '.messages', function(){
	alert( $(this).isScrolledToBottom() );
});