samirbr · July 11, 2015 20:07
diff --git a/lazy-scroll.html b/lazy-scroll.html
 <!DOCTYPE html>
 <html>
 <head>
   <!-- http://jsfiddle.net/p7snevh1/81/ by myself -->
    <style>
        html, body { height: 100%; }
        #list { height: 100%; }
        #list>.item { 
            height: 18px; padding: 2px 0; border-bottom: solid 1px gray; overflow: hidden;
        }
    </style>
 </head>
 <body>
    <div id="list">    
    </div>
    <script src="http://code.jquery.com/jquery-git.js"></script>
    <script>
            (function( $ ) {
            	$.fn.scrollstop = function(fn) {
            		return this.each(function() {
            			var $element = $( this ),
            				element = this;
            			$element.scroll(function() {
            				clearTimeout( $.data( element, "scrollCheck" ) );
            				$.data( element, "scrollCheck", setTimeout(function() {
            					fn();
            				}, 100 ) );
            			});
            		});
            	};
            
            })( jQuery );
            
            $(function () {
                var ITEM_HEIGHT = 22,
                    BOTTOM_OFFSET = 5 * ITEM_HEIGHT,
                    $list = $('#list'),
                    prevScroll,
                    offset = 0;
                
                function viewportHeight($elem) {
                    var elemHeight = $elem.outerHeight(),
                        winHeight = $(window).height(),
                        bounds = $elem[0].getBoundingClientRect(), 
                        top = bounds.top, 
                        bottom = bounds.bottom;
                    
                    return Math.max(0, top > 0 ? 
                        Math.min(elemHeight, winHeight - top)
                        : (bottom < winHeight ? bottom : winHeight));
                }
                
                function scrollOffset() {
                    var b = document.body;
                    return (pageYOffset || b.scrollTop) - (b.clientTop || 0);
                }
                
                function load() {
                    if (scrollOffset() > prevScroll || !prevScroll) { // scrolling down
                        var listHeight = Math.min(viewportHeight($list), $list.height()),
                            maxItems = Math.floor(listHeight / ITEM_HEIGHT),
                            itemsOffset = Math.floor((scrollOffset() - (prevScroll || 0)) / ITEM_HEIGHT),
                            limit = offset == 0 ? maxItems : itemsOffset;
                        
                        prevScroll = scrollOffset();
                        
                        if (limit) {
                            $.get('http://www.stellarbiotechnologies.com/media/press-releases/json', {
                                offset: offset,
                                limit: limit,
                            }, function (data) {
                                if (data.news.length) {                        
                                    $list.append($.map(data.news, function (item) {
                                        return '<div class="item">'+ 
                                            '<span class="date">' + 
                                            item.published + 
                                            '</span> - ' +
                                            item.title + 
                                        '</div>';
                                    }).join('\n'));
                                    
                                    $list.height(($list.find('.item').length + 5) * ITEM_HEIGHT);
                                    
                                    offset += limit;
                                } else {
                                    // reached end of feed
                                    $list.height(($list.find('.item').length) * ITEM_HEIGHT);
                                    $list.append('...END...');
                                }    
                            }, 'json');
                        }
                    }
                }
                
                $([window, document, 'body', '#list']).scrollstop(function (event) {
                    load();
                });
                
                $(window).on('resize', function (event) {
                    load();
                });
                
                load();
            });
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<!-- http://jsfiddle.net/p7snevh1/81/ by myself -->
	<style>
	html, body { height: 100%; }
	#list { height: 100%; }
	#list>.item {
	height: 18px; padding: 2px 0; border-bottom: solid 1px gray; overflow: hidden;
	}
	</style>
	</head>
	<body>
	<div id="list">
	</div>
	<script src="http://code.jquery.com/jquery-git.js"></script>
	<script>
	(function( $ ) {
	$.fn.scrollstop = function(fn) {
	return this.each(function() {
	var $element = $( this ),
	element = this;
	$element.scroll(function() {
	clearTimeout( $.data( element, "scrollCheck" ) );
	$.data( element, "scrollCheck", setTimeout(function() {
	fn();
	}, 100 ) );
	});
	});
	};

	})( jQuery );

	$(function () {
	var ITEM_HEIGHT = 22,
	BOTTOM_OFFSET = 5 * ITEM_HEIGHT,
	$list = $('#list'),
	prevScroll,
	offset = 0;

	function viewportHeight($elem) {
	var elemHeight = $elem.outerHeight(),
	winHeight = $(window).height(),
	bounds = $elem[0].getBoundingClientRect(),
	top = bounds.top,
	bottom = bounds.bottom;

	return Math.max(0, top > 0 ?
	Math.min(elemHeight, winHeight - top)
	: (bottom < winHeight ? bottom : winHeight));
	}

	function scrollOffset() {
	var b = document.body;
	return (pageYOffset \|\| b.scrollTop) - (b.clientTop \|\| 0);
	}

	function load() {
	if (scrollOffset() > prevScroll \|\| !prevScroll) { // scrolling down
	var listHeight = Math.min(viewportHeight($list), $list.height()),
	maxItems = Math.floor(listHeight / ITEM_HEIGHT),
	itemsOffset = Math.floor((scrollOffset() - (prevScroll \|\| 0)) / ITEM_HEIGHT),
	limit = offset == 0 ? maxItems : itemsOffset;

	prevScroll = scrollOffset();

	if (limit) {
	$.get('http://www.stellarbiotechnologies.com/media/press-releases/json', {
	offset: offset,
	limit: limit,
	}, function (data) {
	if (data.news.length) {
	$list.append($.map(data.news, function (item) {
	return '<div class="item">'+
	'<span class="date">' +
	item.published +
	'</span> - ' +
	item.title +
	'</div>';
	}).join('\n'));

	$list.height(($list.find('.item').length + 5) * ITEM_HEIGHT);

	offset += limit;
	} else {
	// reached end of feed
	$list.height(($list.find('.item').length) * ITEM_HEIGHT);
	$list.append('...END...');
	}
	}, 'json');
	}
	}
	}

	$([window, document, 'body', '#list']).scrollstop(function (event) {
	load();
	});

	$(window).on('resize', function (event) {
	load();
	});

	load();
	});
	</script>
	</body>
	</html>