JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div class="space">...</div>

	<div id="content"></div>
	<div id="loader">Aguarde, carregando próxima página <img src="http://i.stack.imgur.com/I5zfv.gif" /></div>
	<br /><br /><br />
</body>

CSS

body{font:12px Arial, Helvetica, sans-serif; text-align:left; padding:0;}

.space{
	height:800px
}

#loader {
    background : #CCCCCC;
	padding    : 5px;
}

#content {
    width      : 200px;
    border     : #CCCCCC 1px solid;
    overflow   : hidden;
	background : #f3f3f3;
}

p{
	padding : 50px 0
}

JavaScript

var i = 0;
$(window).scroll(function() {
	var scrollTop     = $(window).scrollTop();
	var elementOffset = $('#loader').offset().top;
	var distance      = (elementOffset - scrollTop);

	if( distance < $(window).height() )
	{
		i++;

		if( i <= 10 )
		{
			$('#content').append('<p>Página' + i + '</p>');
		}
		else
		{
			$('#loader').html('Última página');
		}
	}
});