人気ブログランキングへ

2007年07月13日

HTML で Excel の「ウィンドウ枠の固定」を実現する

Excel で「ウィンドウ枠の固定」をすると、固定部分は縦または横方向にしかスクロールしなくなる。
HTML でこのようなスクロールを実現できないか悩んでいたら、ある人がこういうサイトを教えてくれた:

ウィンドウ枠の固定2
http://www.h7.dion.ne.jp/~nuru44/window2.html

ポイントは次の2点
  1. 本体部分、および、上・左の固定部分を別々にブロック化し、CSS の overflow を使ってそれぞれブロック内でスクロールできるようにしておく
  2. JavaScript を使って、本体部分のスクロール量を上・左の固定部分のスクロール量に反映させる
上に紹介したサイトのものは複雑でわかりにくかったので、もっとシンプルな例を作ってみた。

 
あいうえおかきくけこさしすせそたちつてと
あいうえおかきくけこさしすせそたちつてと
あいうえおかきくけこさしすせそたちつてと
いうえおかきくけこさしすせそたちつてとあ
うえおかきくけこさしすせそたちつてとあい
えおかきくけこさしすせそたちつてとあいう
おかきくけこさしすせそたちつてとあいうえ
かきくけこさしすせそたちつてとあいうえお
きくけこさしすせそたちつてとあいうえおか
くけこさしすせそたちつてとあいうえおかき
けこさしすせそたちつてとあいうえおかきく
こさしすせそたちつてとあいうえおかきくけ
さしすせそたちつてとあいうえおかきくけこ
しすせそたちつてとあいうえおかきくけこさ
すせそたちつてとあいうえおかきくけこさし
せそたちつてとあいうえおかきくけこさしす
そたちつてとあいうえおかきくけこさしすせ
たちつてとあいうえおかきくけこさしすせそ
ちつてとあいうえおかきくけこさしすせそた
つてとあいうえおかきくけこさしすせそたち
てとあいうえおかきくけこさしすせそたちつ
とあいうえおかきくけこさしすせそたちつて

このソースは以下のとおり:

<html>
<head>
<script type="text/javascript">
<!--
function scrollRC()
{
document.getElementById('trow').scrollLeft
= document.getElementById('tbody').scrollLeft;
document.getElementById('tcol').scrollTop
= document.getElementById('tbody').scrollTop;
}
// -->
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>&nbsp;</td>
<td><div id="trow" style="background-color: #ffff00; overflow: hidden; width: 184px; height; 1em;"><div style="width: 400px; height: 1em;">あいうえおかきくけこさしすせそたちつてと</div></div></td>
</tr>
<tr valign="top">
<td align="center"><div id="tcol" style="background-color: #ff00ff; overflow: hidden; width: 1em; height: 184px;"><div style= "width: 1em; height: 400px;">あいうえおかきくけこさしすせそたちつてと </div></div></td>
<td><div onScroll="scrollRC()" id="tbody" style="overflow: auto; width: 200px; height: 200px;"><div style="width: 400px; height: 400px;">あいうえおかきくけこさしすせそたちつてと<br>
いうえおかきくけこさしすせそたちつてとあ<br>
うえおかきくけこさしすせそたちつてとあい<br>
えおかきくけこさしすせそたちつてとあいう<br>
おかきくけこさしすせそたちつてとあいうえ<br>
かきくけこさしすせそたちつてとあいうえお<br>
きくけこさしすせそたちつてとあいうえおか<br>
くけこさしすせそたちつてとあいうえおかき<br>
けこさしすせそたちつてとあいうえおかきく<br>
こさしすせそたちつてとあいうえおかきくけ<br>
さしすせそたちつてとあいうえおかきくけこ<br>
しすせそたちつてとあいうえおかきくけこさ<br>
すせそたちつてとあいうえおかきくけこさし<br>
せそたちつてとあいうえおかきくけこさしす<br>
そたちつてとあいうえおかきくけこさしすせ<br>
たちつてとあいうえおかきくけこさしすせそ<br>
ちつてとあいうえおかきくけこさしすせそた<br>
つてとあいうえおかきくけこさしすせそたち<br>
てとあいうえおかきくけこさしすせそたちつ<br>
とあいうえおかきくけこさしすせそたちつて</div></div></td>
</tr>
</table>
</body>
</html>
タグ:javascript CSS HTML
posted by K/I at 07:03 | 東京 ☁ | Comment(4) | TrackBack(0) | 技術メモ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
立ち寄りました(^^)のでカキコしました。

Posted by cutyzizi at 2008年04月25日 16:07
いいですね。参考にします。
Posted by 通りすがり at 2010年08月18日 00:11
なるほどーこうすればよかったんですね。
Posted by at 2011年09月02日 12:57
実装したい機能でした。
参考とさせていただきます。
ありがとうございます。
Posted by 林 at 2012年09月15日 09:22
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバックURL
http://blog.seesaa.jp/tb/47660823
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック