コード

コードです。

$('document').ready(function(){
	updatestatus();
	scrollalert();
});
function updatestatus(){
	//ロードしたアイテムの数を表示
	var totalItems=$('#content p').length;
	$('#status').text('現在、 '+totalItems+' 個を表示しています。');
}
function scrollalert(){
	var scrolltop=$('#scrollbox').attr('scrollTop');
	var scrollheight=$('#scrollbox').attr('scrollHeight');
	var windowheight=$('#scrollbox').attr('clientHeight');
	var scrolloffset=20;
	if(scrolltop>=(scrollheight-(windowheight+scrolloffset)))
	{
		//新しいアイテムのロード
		$('#status').text('続きを読み込んでいます・・');
		$.get('読み込むファイルのパス', '', function(newitems){
			$('#content').append(newitems);
			updatestatus();
		});
	}
	setTimeout('scrollalert();', 1500);
}

動作にはjQueryが必要です。テキストは適当に変更してください。

HTML

<div id="mainbody" >

<div id="scrollcontainer">
<div id="scrollbox" >
<div id="content" >
<p>ここにテキスト1</p>
<p>ここにテキスト2</p>
<p>ここにテキスト3</p>
<p>ここにテキスト4</p>
<p>ここにテキスト5</p>
<p>ここにテキスト6</p>
<p>ここにテキスト7</p>
<p>ここにテキスト8</p>
</div>

</div>
<p><span id="status" ></span></p>
</div>

$.getで指定したファイルがスクロールする事で読み込まれます。数値はvar totalItems=$(‘#content p’).length;で指定しているのでリストで表示したいならpをliなどに変更すればいいっぽい。

ブログのサイドバーにcssが影響してますが気にしないで下さい。

デモではhtmlを読み込んでいるので同じ内容が繰り返されていますが、用途は動的なコンテンツになりそうですね。検索ページとかアーカイブにもいいかも。

[note]【追記】
お友達のヤクモさんが改良してくれましたよ。処理スピードも速いです。ぜひご覧下さい。
ボックス内をスクロールすると自動でコンテンツをロードするjQueryをちょっと変えてみた[/note]

Create a Dynamic Scrolling Content Box Using AJAX