JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div class="space">...</div>
<div id="content"></div>
<div id="loader" class="0">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;
var b = 1;
var itens = 10;
$(window).scroll(function() {
if( $(window).scrollTop() >= $(document).height() - screen.height )
{
i++;
b++;
if( i <= itens)
{
$('#content').append('<p>Página' + i + '</p>');
}
else
{
$('#loader').html('Última página');
}
}
});