guilhermeslk/scroll-infinito

## scroll-infinito
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Scroll Infinito</title>
        <style>
            body {
                margin: 10px;
                font-family: "Trebuchet MS", Helvetica, sans-serif;
                font-size: 1.5em;
                background:  #E5F7FF;
            }
            ul {
                padding: 10px;
                list-style-type: none;
            }
            .hidden {
                opacity: 0;
            }
        </style>
    </head>
    <body>
        <ul id="list">
        </ul>
    </body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            var items = 0;

            function isElementInScroll(element) {
                var
                    windowScrollTop = $(window).scrollTop(),
                    documentHeight  = windowScrollTop + $(window).height(),
                    elementTop      = $(element).offset().top,
                    elementBottom   = elementTop + $(element).height();

                return ((elementBottom <= documentHeight) && (elementTop >= windowScrollTop));
            }

            function loadItems(firstTime) {
                var html = '';

                for ( var i = 0; i < 50; i++ ) {
                    html += '<li' + ( !firstTime ? ' class="hidden" ' : '') + '> Item ' + ( i  + items + 1) + '</li> ';
                }

                var $result = $('#list').append(html);

                if (!firstTime) {
                    $('.hidden').animate({ opacity: 1 }, 1500);
                }
            }

            $(this).scroll( function(evt)  {
                if ( isElementInScroll('#list li:last') ) {
                    items += 50;
                    loadItems();
                }
            });

            loadItems(true);
        });
    </script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Scroll Infinito</title>
	<style>
	body {
	margin: 10px;
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	font-size: 1.5em;
	background: #E5F7FF;
	}
	ul {
	padding: 10px;
	list-style-type: none;
	}
	.hidden {
	opacity: 0;
	}
	</style>
	</head>
	<body>
	<ul id="list">
	</ul>
	</body>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {

	var items = 0;

	function isElementInScroll(element) {
	var
	windowScrollTop = $(window).scrollTop(),
	documentHeight = windowScrollTop + $(window).height(),
	elementTop = $(element).offset().top,
	elementBottom = elementTop + $(element).height();

	return ((elementBottom <= documentHeight) && (elementTop >= windowScrollTop));
	}

	function loadItems(firstTime) {
	var html = '';

	for ( var i = 0; i < 50; i++ ) {
	html += '<li' + ( !firstTime ? ' class="hidden" ' : '') + '> Item ' + ( i + items + 1) + '</li> ';
	}

	var $result = $('#list').append(html);

	if (!firstTime) {
	$('.hidden').animate({ opacity: 1 }, 1500);
	}
	}

	$(this).scroll( function(evt) {
	if ( isElementInScroll('#list li:last') ) {
	items += 50;
	loadItems();
	}
	});

	loadItems(true);
	});
	</script>
	</html>