HTML でこのようなスクロールを実現できないか悩んでいたら、ある人がこういうサイトを教えてくれた：
ウィンドウ枠の固定２
http://www.h7.dion.ne.jp/~nuru44/window2.html
ポイントは次の２点
- 本体部分、および、上・左の固定部分を別々にブロック化し、CSS の
overflowを使ってそれぞれブロック内でスクロールできるようにしておく - 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> </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>
参考とさせていただきます。
ありがとうございます。