divを入れ子にし、内側のdivのpixelTopを連続的に変化させている のがポイント、意外とアイデア賞かも。なお、文字が見えなくなっても スクロールは止まらないので、実際に使うときはif文を使って pixelTopがある値になったらスクロールをストップする処理が必要。
■データバインドで作るダイナミックな表
InternetExplorer4.0以降から利用可能になったDynamicHTMLには、「データバインド」と呼ばれる機能が含まれています。これは、Webページ上で簡単なデータベースを実現する機能です。たとえば、Web上に蔵書や音楽CDの一覧を載せたいとしましょう。この場合、<TABLE>タグで表を作成するのが一般的でしょう。しかし、<TABLE>タグで作った表は、いったん読み込んだら変化しない静的な表です。レコードを並び替えることも、条件を指定して絞り込むこともできません。ところが、データバインドを使えば、並び替えや絞込が可能な表を作成できるのです。
「データベース」というと、サーバ側で何らかの処理が必要というイメージがありますが、データバインドは完全にクライアント側で動作するのが特徴です。データバインドで必要なのは、次の2つのファイルです。
・表の元データとなるCSVファイル等のテキストファイル
・テキストファイルのデータを表として表示するHTMLファイル
ページ作者が行うのは、この2つのファイルを作ってWebサーバ上に置くだけです。ユーザーがIE4以降のブラウザでHTMLファイルにアクセスすると、先の2つのファイルがブラウザに送られ、並び替えや絞込が可能なダイナミックな表が表示される仕組みです。表の元データがHTMLファイルから独立したテキストファイルであるため、データの編集もテキストエディタがあれば簡単です。
IE4以降のブラウザでしか表示できないという制約もありますが、デジカメで撮影した画像を管理したり、それをWebページで公開する手段として、データバインドはたいへん魅力的です。さらに、サーバ上に特別なソフトが不要ですから、社内のイントラネットで簡易データベースを構築するのにも向いています。