JavaScriptメモ - 巨大なテーブルをスクロールで表示

通常webサイトを作っているならば、巨大なテーブルなぞには縁が無いはずだが、ゲーム関係ともなるとそうはいかなくなる。

特に女神転生には合体表というものがあるので、これをHTMLで表現する場合は嫌が応にもページ領域を占有してしまう。これを回避するにはフォントサイズを小さくして固定にするのがベストだが、フォントサイズ固定を避けて、敢えて可変サイズで表示できないかと考えた。

でまあ、どうせならJavaScript使って表示しちまえという結論に辿りついて出来たのがこれ。

スクロールを用いたテーブル表示

元のテーブルには一切手を加えていないので、JavaScriptがOFFなら通常通りでかい合体表が表示される。

んで、ただスクロールバーをつけるだけではなんなので、テーブル内をドラッグすることでスクロールする機能を追加した。つかむインターフェースとかいうやつ。

作ってみて気づいたが、たとえスクロールをサポートしたとしても、やっぱり2方向スクロールはつかんでいる最中に現在地を見失いやすいので、よろしくないなぁと。実用する場合は横スクロールのみにするのが見た目的にも使い勝手的にも一番なんじゃないだろうか。